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上 一 版 译 着 序 


网 上 的 生活 越 来 越 丰 富 多 彩 。 从 最 初 的 (X)HTML 网 页 ， 到 一 度 热 炒 的 
DHTML 概 念 ， 再 到 近 几 年 流行 起 来 的 CSS， 网 站 和 网 页 的 设计 工作 变 
得 越 来 越 帘 便 ， 网 上 的 内 容 越 来 越 富 于 变化 和 色彩 。 但 是 ， 很 多 网 页 
设计 者 和 了 网民 朋友 都 不 太 喜 欢 JavaScript， 这 主要 有 以 下 几 方 面 原因 。 
第 一 ， 很 多 网 页 设计 者 认为 JavaScript 的 可 用 性 很 差 早期 的 浏览 履 
彼此 很 少 兼 容 ， 如 果 想 让 上 自己 编写 出 来 的 JavaScript 肢 本 在 多 种 浏览 妖 
环境 里 运行 ， 束 必须 编写 许多 用 来 探测 浏 咒 器 的 具体 品 和 脾 和 具体 版 本 
的 测试 及 分 支 代码 〈 术 语 称 之 为 “浏览 器 嗅 探 > 代码 ) 。 这 样 的 脚本 往 
往 到 处 是 if.. .else 语句 ， 既 不 容易 阅读 ， 又 不 容易 复查 和 纠 错 ， 更 
难以 做 到 让 同一 个 脚本 适用 于 所 有 的 浏 斋 硕 。 第 二 ， 对 广大 的 网 民 来 
说 ，JavaScript 网 页 的 可 访问 性 很 差 浏 蜗 器 会 时 不 时 地 弹出 一 个 报 
背 窗 口 甚 至 导致 系统 死机 ， 让 人 乘 兴 而 来 、 败 兴 而 去 。 第 三 ， 
JavaScript 被 很 多 网 站 用 来 实现 弹出 广告 窗口 的 功能 ， 人 们 大 烦 这 样 的 
广告 ， 也 束 “ 恨 ? 屋 及 马 地 厌烦 起 JavaScript 来 了 。 第 四 , “JavaScript” 这 
个 名 字 里 的 “Java” 往 往 让 人 们 误 以 为 其 源 于 Java 语 言 ， 而 实际 接触 之 后 
才 发 现 它 们 根本 没有 任何 联系 。 与 Java 语 言 相 比 ，JavaScript 语 言 要 人 简 
。 很 多 程序 员 宁 肯 钻 研 Java， 也 不 愿意 去 了 解 JavaScript 的 功能 
[用 法 。 
不 管 什 么 原因 ，JavaScript 曾 经 不 受 欢迎 的 确 是 一 个 事实 。 
现在 ， 和 情况 发 生 了 极 大 的 变化 。 因 为 几 项 新 技术 的 出 现 ，JavaScript 的 
春天 似乎 来 了 。 首 先 ，W3C (万 维 网 联盟 ) 推出 的 标准 化 DOM 


(Document Object Model， 文 档 对 象 模 型 ) 已 经 一 统 江湖 ， 目 前 市 场 
上 常见 的 浏 贤 器 可 以 说 没有 不 支持 的 。 这 对 网 页 设计 者 来 说 意味 着 可 


以 用 简单 的 “对 象 检 测 ” 代 码 来 取代 那些 繁复 的 浏览 絮 嗅 探 代 码 ， 而 按 
照 DOM 编 写 出 来 的 JavaScript 页 面 不 像 过 去 那样 容易 出 问题 ， 这 对 网 民 
来 说 意味 着 浏览 体验 变 得 流畅 了 。 其 次 ， 最 近 兴 起 的 Ajax 技术 以 DOM 
和 JavaScript 语 言 (以 及 CSS 和 XHTML) 为 基本 要 素 ， 基 于 Ajax 技术 的 
网 站 离 不 开 JavaScript 和 DOM 脚 本 。 


其 实 ， 人 们 对 JavaScript 的 恶劣 印象 在 很 大 程度 上 来 源 于 早期 的 程序 员 
对 这 种 语言 的 滥用 。 如 末 程 序 员 在 编写 JavaScript 脚 本 的 时 候 能 够 把 问 
题 考虑 得 面面俱到 ， 残 可 以 避免 许多 问题 ， 但 可 习 的 是 如 此 优秀 的 程 
序 员 太 少 了 。 事 实 上 ， 即 使 是 在 JavaScript 已 经 开始 流行 起 来 的 今天 ， 
如 果 程 序 员 在 编写 JavaScript 脚 本 的 时 候 不 遵守 相关 的 标准 和 编程 准 
则 ， 也 仍 会 导致 各 种 各 样 的 问题 。 


在 2002 年 前 后 ，CSS 也 是 一 种 不 太 受 人 们 欢迎 的 Web 显示 语言 ， 除 了 用 
它 来 改变 一 下 字体 ， 几 乎 没有 人 用 它 来 干 其 他 的 事情 。 但 没 过 多 久 ， 
人 们 对 利用 CSS 设 计 网 页 布局 的 兴趣 就 一 发 而 不 可 收拾 ， 整 个 潮流 也 从 
那 时 扭转 了 过 来 。 现 在 ， 掌 握 CSS 已 经 成 为 许多 公司 在 招聘 网 站 开发 人 
员 时 的 一 项 要 求 。 


目前 ，DOM 编 程 技术 的 现状 与 CSS 技 术 在 2002 年 时 的 境况 颇 有 几 分 相 
似 。 受 Google Maps 和 Flickr 等 著名 公司 利用 DOM 编 程 技术 推出 的 
Gmail、Google Suggest 等 新 型 服务 的 影响 和 带动 ， DOM 编 程 人 才 的 需 
求 正 日 益 增 加 。 有 越 来 越 多 的 人 开始 迷 上 了 脚本 编程 技术 ， 并 开始 学 
习 如 何 利 用 DOM 技 术 去 改善 而 不 是 妨碍 网 站 的 可 用 性 和 可 访问 性 。 


本 书 的 作者 Jeremy Keith 是 Web 标 准 计划 DOM Scripting 任 务 组 的 负责 人 
之 一 ， 他 在 这 本 书 里 通过 大 量 示例 证 明了 这 样 一 个 事实 : 只 要 运用 得 
当 ， 并 且 注 意 避 开 那 些 “ 经 典 的 ”JavaScript 险 阱 ，DOM 编 程 技 术 束 可 以 
成 为 Web 开 发 工具 箱 里 义 一 件 功 能 强大 甚至 是 不 可 或 缺 的 好 东西 。 


本 书 并 不 十 一 本 参考 大 全 类 型 的 图 书 ， 作 者 只 重点 介绍 了 儿 种 最 有 用 
的 DOM 方 法 和 属性 。 本 书 的 精华 在 于 作者 在 书 中 提 人 到 的 天 于 JavaScript 
和 DOM 脚 本 编程 工作 的 基本 原则 、 民 好 习惯 和 正确 思路 。 如 有 果 读者 能 
通过 书 中 的 几 个 案例 真正 领情 这 些 原 则 、 习 惯 和 思路 ， 就 一 定 能 让 自 
己 的 编程 技术 再 上 一 个 台阶 。 


这 是 一 本 非常 实用 的 好 书 ， 是 一 本 值得 一 读 再 读 的 好 书 。 作 为 本 书 的 
译 者 ， 我 们 相信 它 会 让 每 位 读者 、 目 建 网 站 的 设计 者 和 来 到 目 建 网 站 


的 访问 者 都 受 葵 匪 浅 。 
参加 本 书 翻译 的 人 员 还 有 韩 兰 、 李 永山 、 胡 晋平 、 高 文雅 。 


序 


第 2 版 已 经 出 版 了 。 


首先 ， 我 要 澄清 一 点 : 虽然 我 的 名 字 印 在 了 封面 上 ， 但 我 并 没有 参与 
这 个 版 本 的 修订 工作 。 这 个 新 版 本 完全 出 目 Jeffrey Sambells 之 手 。 出 版 
社 因 为 出 新 版 的 事 找 过 我 ， 但 我 的 时 间 确 实 安排 不 开 了 。 因 此 ， 看 到 
自己 的 名 字 厅 列 其 间 ， 心 中 不 禁 顿 生 愧 意 。 


我 很 融 兴 地 向 读者 朋友 们 报告 ,新 版 本 中 所 有 的 修订 都 非常 符合 我 的 
期 望 一 一 英文 原 书 的 封面 除外 。 但 不 管 怎么 说 ， 第 二 版 的 内 容 真 的 是 
和 


e。 HIMLS5 
。 Ajax 
。 JavaScript 库 (尤其 是 jQuery) 


相 比 之 下 ， 新 版 的 内 容 又 扩充 了 不 少 ， 但 整 本 书 仍然 一 直 在 强调 最 佳 
实践 〈 特 别 是 渐进 增强 ) ， 这 正 是 让 我 喜出望外 的 地 方 。 


新 版 本 中 的 代码 示例 全 部 换 成 用 HTML5 标 记 来 写 了 。 有 关 Ajax 的 示例 
代码 也 精简 得 当 ， 尺 管 人 简略， 但 上 下 文 仍然 能 够 传达 出 我 在 Bulletproof 
Ajax ! 中 提出 的 观点 ， 永远 不 要 假设 Ajax (或 JavaScript， 等 等 ) 一 定 可 
用 o 


pp 


! 文 版 《Bulletproof Ajax 中 文 版 》 已 经 由 人 民 邮 电 出 版 社 出 版 。 编者 注 


最 让 我 高 兴 的 一 点 ， 就 是 新 版 本 增加 了 主要 介绍 jQuery 的 章节 。 这 一 章 
把 本 书 前 面 的 典型 代码 示例 ， 使 用 jQuery 重 写 了 一 遍 。 这 样 一 来 ， 正 好 


解释 了 人 们 对 为 什么 使 用 库 的 种 种 疑问 。 它 让 你 先 理解 了 的 层 代 码 的 
工作 原理 ， 然 后 再 告诉 你 使 用 库 为 什么 能 节省 时 间 和 精力 。 


总 而 言 之 ， 这 本 书 新 增 的 内 容 都 十 分 精彩 ， 对 读者 绝对 有 用 。 为 了 尺 
量 多 展示 一 些 jQuery 的 方法 ， 也 限于 篇 幅 ， 这 一 版 以 介绍 库 的 附 永 代 符 
了 上 一 版 介绍 DOM 方 法 的 附录 。 这 多 少 让 我 感到 有 一 些 遗 憾 ， 不 过 ， 
我 会 争取 在 目 己 的 博客 上 公布 第 1 版 的 附录 。 


最 后 ， 我 还 是 要 给 第 2 版 再 竖 坚 大 姆 指 ， 男 外 再 给 读者 一 点 建议 。 如 果 
你 买 过 本 书 第 1 版 ， 念 怕 找 一 些 专门 讲 HTML5、Ajax 或 jQuery 的 书 看 会 
比较 好 。 但 如 果 你 就 是 想 知 道 怎么 才能 正确 地 使 用 JavaScript， 那 这 个 
经 过 扩展 的 新 版 本 残 是 你 的 最 佳 选 择 。 


Jeremy Keith 
2011 年 1 月 3 日 


前 襄 


这 是 一 本 讲述 一 种 程序 设计 语言 的 书 ， 但 它 不 是 专门 写 给 程序 员 的 ， 
而 主要 是 写 给 Web 设 计 师 的 。 有 具体 地 说 ， 本 书 是 为 那些 喜欢 使 用 CSS 和 
HTML 并 愿意 遵守 编程 规范 的 Web 设 计 师 们 编写 的 。 


本 书 由 代码 和 概念 两 大 部 分 构成 。 不 要 被 那些 代码 吓 倒 ， 我 知道 它们 
乍 看 起 来 很 距 人 ， 可 只 要 抓 位 了 代码 背后 的 概念 ， 束 会 发 现 你 是 在 用 
一 种 新 语言 去 阅读 和 编写 代码 。 


学 习 一 种 新 的 程序 设计 语言 看 起 来 可 能 很 难 ， 但 事实 却 并 非 如 此 。 
DOM 脚 本 看 起 来 似乎 比 CSS 更 复 杀 ， 可 只 要 领情 了 它 的 语法 ， 你 融会 
发 现 目 己 又 掌握 了 一 样 功能 强大 的 Web 开 发 工具 。 上 归根结底 ， 代 码 都 是 
思想 和 概念 的 体现 。 


我 在 这 里 要 告诉 大 家 一 个 秘密 : 其 实 没 人 能 把 一 种 程序 设计 语言 的 所 
有 语法 和 关键 字 都 记 住 。 如 果 有 拿 不 准 的 地 方 ， 查 阅 参 考 书 就 全 解决 
了 。 但 本 书 不 是 一 本 参考 大 全 。 本 书 只 介绍 最 基本 的 JavaScript 语 法 。 


本 书 的 真正 目的 是 让 大 家 理解 DOM 脚 本 编程 技术 背后 的 思路 和 原则 ， 
或 许 你 对 其 中 一 部 分 早 就 熟悉 了 。 平 稳 退 化 、 渐 进 增强 、 以 用 户 为 中 
心 的 设计 对 任何 前 端 web 开 发 工作 都 非常 重要 。 这 些 思 路 贯穿 在 本 书 的 
所 有 代码 示例 中 。 


你 将 会 看 到 用 来 创建 图 片 库 页 面 的 脚本 、 用 来 创建 动画 效果 的 脚本 和 
用 来 丰富 页 面 元 素 呈 现 效果 的 脚本 。 如 有 果 你 愿意 ， 完 全 可 以 把 这 些 例 
但 更 重要 的 是 理解 这 些 代 码 痛 后 的 “如 

Ee 日“ 大 从 六 机 


如 果 你 已 经 在 使 用 CSS 和 HTML 来 把 设计 思路 转化 为 活生生 的 网 页 ， 玖 
应 该 知道 Web 标 准 有 多 么 重要 。 还 记得 你 是 在 何 时 发 现 目 己 只 需 修 改 一 
个 CSS 文 件 束 可 以 改变 整个 网 站 的 视觉 效 末 吗 ? DOM 技 术 有 痢 同 样 强 
大 的 威力 。 不 过 ， 能 力 越 大 ， 贡 任 也 丈 越 大 。 因 此 ， 我 不 仅 想 让 你 看 
到 用 DOM 脚 本 实现 的 超 酷 效 打 ， 更 想 让 你 看 到 怎样 才能 利用 DOM 脚 本 
编程 扩 术 以 一 种 既 方 便 目 己 更 体贴 用 户 的 方式 去 充实 和 完善 网 页 。 


如 果 需 要 本 书 所 讨论 的 相关 代码 1 ， 到 www.friendsofed.com 网 站 搜索 本 
书 的 主页 束 可 以 查 到 。 还 可 以 在 这 个 网 站 找到 friends of ED 出 版 社 的 所 
有 其 他 好 书 ， 内 容 涉 及 Web 标 准 、Flash、DreamWeaver 以 及 许多 细 分 的 
计算 机 领域 。 


1 本 书 代码 示例 也 可 从 图 灵 网 站 www.turingbook.com 本 书 网 页 免费 注册 下 载 。 编者 注 
你 对 JavaScript 的 探索 不 应 该 在 合 上 本 书 时 就 停止 下 来 。 我 开设 了 
http://domscripting.com/ 网 站 ， 在 那里 继续 与 大 家 共同 探讨 现代 的 、 标 


准 化 的 JavaScript。 我 希望 你 能 到 该 网 站 看 看 。 与 此 同时 ， 我 更 希望 本 
书 能 够 对 大 家 有 所 帮助 。 视 你 们 好 运 ! 


致谢 


没有 我 的 朋友 和 同事 Andy Buddl http:Wwww.andybudd.com ) 与 

Richard Rutter (http://www.Clagnut.com ) 的 帮助 ， 本 书 的 面世 就 无 从 

谈 起 。Andy 在 我 们 的 家 乡 Brighton 开 设 了 一 个 名 为 Skillswap 
(http://www.skillswap.org ) 的 免费 培训 网 站 。 在 2004 年 7 月 ，Richard 


和 我 在 那里 做 了 一 次 关于 JavaScript 和 DOM 的 联合 演讲 。 演 讲 结束 后 ， 
我 们 来 到 附近 的 一 家 小 酒馆 ， 在 那里 ，Andy 建 议 我 把 演讲 的 内 容 扩 展 
成 一 本 书 ， 也 就是 本 书 的 第 1 版 。 


1 Andy Budd 是 超级 畅销 书 《精通 CSS， 高 级 Web 标 准 解决 方案 (第 2 版 )》 的 作者 ， 该 书 已 由 
人 民 邮 电 出 版 社 出 版 。 编者 注 


如 果 没 有 两 方面 的 帮助 ， 我 大 概 永 远 也 学 不 会 编写 JavaScript 代 码 。 一 
方面 是 几乎 每 个 Web 浏 览 器 里 都 有 “view source” (查看 源 代码 ) 选项 。 
谢谢 你 , “view source”。 为 一 方面 是 那些 多 年 来 一 直 在 编写 计 人 叹 为 观 
止 的 代码 并 解说 重要 思路 的 JavaScript 大 师 们 。Scott Andrew、Aaron 
Boodman 、 Steve Champeon、Peter-Paul Koch 、 Stuart Langridge 和 Simon 


Willison 只 是 我 现在 能 想到 的 几 位 。 感 谢 你 们 所 有 人 的 分 享 精神 。 


感谢 Molly Holzschlag 与 我 分 享 她 的 经 验 和 忠告 ， 感 谢 她 对 本 书 初 稿 给 
予 反 馈 ! 意 见 。 感 谢 Derek Featherstone 与 我 多 次 愉快 地 讨论 JavaScript 问 
题 ， 我 喜欢 他 思考 和 分 析 问 题 的 方法 。 


我 还 要 特别 感谢 Aaron Gustafson， 他 在 我 写作 本 书 期 间 向 我 提供 了 许多 
至 贵 的 反馈 和 灵感 。 


在 写作 第 1 版 期 间 ， 我 有 邓 参 加 了 两 次 非常 棒 的 盛会 : 在 得 克 院 斯 州 
Austin 举 办 的 “South by Southwest> 和 在 伦敦 举办 的 @media。 我 要 感谢 
这 两 次 盛会 的 组 织 者 Hugh Forrest 和 Patrick Griffiths， 是 他 们 让 我 有 机 会 
结识 那么 多 最 友善 时 人 一 一 我 从 没 想 过 我 能 有 机 会 与 他 们 成 为 朋友 和 


同事 


最 后 ， 我 要 感谢 我 的 妻子 Jessica Spengler， 不 仅 因 为 她 永远 不 变 的 文 
| 。 谢谢 你 ， 我 


Jeremy Keith 


第 1 章 JavaScript 简 史 


本 章 内 容 


。 JavaScript 的 起 源 
。 浏 览 器 战争 
。 DOM 的 演变 史 


本 书 第 1 版 面世 的 时 候 ， 做 一 名 Web 设 计 师 是 件 很 让 人 很 兴奋 的 事 。5 个 
年 头 过 去 了 ， 这 个 职业 依然 保持 看 强大 的 吸引 力 。 特 别 是 JavaScript， 
经 历 了 从 被 人 误解 到 万 众 肪 目的 巨大 转变 。Web 开 发 呢 ， 也 已 从 混乱 无 
序 的 状态 ， 发 展 成 一 门 需要 严格 训练 才能 从 事 的 正规 职业 。 无 论 设计 
师 还 是 开发 人 员 ， 在 创建 网 站 的 过 程 中 都 积极 地 采用 标准 技术 ，Web 标 
准 已 经 深入 人 心 。 


当 网 页 设计 人 员 谈 论 起 与 Web 标 准 有 关 的 话题 时 ，HTML ( 超 文 本 标记 
语言 ) 和 CSS ( 层 车 样式 表 ) 通常 占据 着 核心 地 位 。 不 过 ，W3C (万 
维 网 联盟 ) 已 批准 另 一 项 技术 ， 所 有 与 标准 相 兼 容 的 Web 浏 览 器 都 支持 
它 ， 这 就 是 DOM (文档 对 象 模型 ) 。 我 们 可 以 利用 DOM 给 文档 增加 区 
互 能 力 ， 环 人像 利用 CSS 给 文档 添加 各 种 样式 一 样 。 


在 开始 学 习 DOM 之 前 ， 我 们 先 检 人 视 一 下 使 网 页 具备 交互 能 力 的 程序 设 
计 语 言 。 这 种 语言 就 是 JavaScript， 它 已 经 诞生 相当 长 的 时 间 了 。 


1.1 _ JavaScript 的 起 源 


JavaScript 是 Netscape 公 司 与 Sun 公 司 合作 开发 的 。 在 JavaScript 出 现 之 
前 ，Web 浏 宽 器 不 过 是 一 种 能 够 显示 超 文 本 文档 的 倍 单 的 软件 。 而 在 
JavaScript 出 现 之 后 ， 网 页 的 内 容 不 再 局 限于 枯燥 的 文本 ， 它 们 的 可 交 
互 性 得 到 了 显著 的 改善 。JavaScript 的 第 一 个 版 本 ， 即 JavaScript 1.0 版 
本 ， 出 现在 1995 年 推出 的 Netscape Navigator 2 浏览 右 中 。 


在 JavaScript 1.0 发 布 时 ，Netscape Navigator 主 字 着 浏览 器 市 场 ， 微 软 的 
IE 浏 哆 器 则 扮演 大 追赶 者 的 角色 。 微 软 在 推出 IE 3 的 时 候 发 布 了 上 自己 的 
VBScript 语 言 ， 同 时 以 JScript 为 名 发 布 了 JavaScript 的 一 个 版 本 ， 以 此 很 
快 跟 上 了 Netscape 的 步伐 。 面 对 微软 公司 的 竞争 ，Netscape 和 Sun 公 司 联 


合 ECMA 《欧洲 计算 机 制造 商 协会 ) 对 JavaScript 语 言 进 行 了 标准 化 。 
于 是 出 现 了 ECMAScript 语 言 ， 这 是 同一 种 语言 的 另 一 个 名 字 。 虽 说 
ECMAScript 这 个 名 字 没 有 流行 开 来 ， 但 人 们 现在 谈论 的 JavaScript 实 际 
上 就 是 ECMAScript 。 


到 了 1996 年 ，JavaScript、ECMAScript、JScript 一 一 随便 你 们 怎么 称呼 
已 经 站 稳 了 脚跟 。Netscape 和 微软 公司 在 各 目的 第 3 版 浏览 右 中 
都 不 同 程度 地 支持 JavaScript 1.1 语 言 。 


注意 ”JavaScript 与 Sun 公 司 开发 的 Java 程 序 语言 没有 任何 联系 。 
JavaScript 最 开始 的 名 字 是 LiveScript， 后 来 选择 “JavaScript" 作 为 其 
正式 名 称 的 原因 ， 大 概 是 想 让 它 听 起 来 有 系 出 名 门 的 感觉 。 但 令 
人 遗憾 的 是 ， 这 一 选择 容易 让 人 们 把 这 两 种 语言 混为一谈 ， 而 这 
种 混淆 叉 因为 各 种 Web 浏 览 絮 确实 具备 这 样 或 那样 的 Java 客 户 问 文 
持 功 能 而 进一步 加 剧 。 事 实 上 ，Java 在 理论 上 几乎 可 以 部 署 在 任何 
环境 ， 但 JavaScript 却 倾向 于 只 应 用 在 Web 浏 览 器 。 


JavaScript 是 一 种 脚本 语言 ， 通 币 只 能 通过 Web 浏 贤 亏 去 完成 一 些 操 作 
而 不 能 像 普通 意义 上 的 程序 那样 独立 运行 。 因 为 需要 由 Web 浏 览 右 进行 
解释 和 执行 ， 所 以 JavaScript 脚 本 不 像 Java 和 C++ 等 编译 型 程序 设计 语言 
那样 用 途 广 泛 。 不 过 ， 这 种 相对 的 简单 性 也 正 是 JavaScript 的 长 处 : 比 
较 容易 学 习 和 和 掌握， 所 以 那些 本 身 不 是 程序 员 ， 但 希望 通过 简单 的 况 
贴 操作 把 脚本 骨 入 现 有 网 页 的 普通 用 户 很 快 就 接受 了 JavaScript 。 


JavaScript 还 同 程 序 员 提供 了 一 些 操控 Web 浏 览 器 的 手段 。 例 如 ， 
JavaScript 语 言 可 以 用 来 调整 Web 浏 多 器 窗口 的 高 度 、 宽 度 和 位 置 等 属 
性 。 这 种 设 定 浏 览 器 属性 的 办 法 可 以 看 做 是 BOM ( 浏 贤 器 对 象 模 
型 ) 。JavaScript 的 早期 版 本 还 提供 了 一 种 初级 的 DOM 。 


1.2 DOM 
机 ， 是 DOM' 简单 地 说 ，DOM 是 一 套 对 文档 的 内 容 进行 抽象 和 概念 化 
方法。 


在 现实 世界 里 ， 人 们 对 所 谓 的 “世界 对 象 模型 ”都 不 会 陌生 。 例 如 ， 当 
用 “汽车 ”\“ 房 子 ? 和 "“ 树 ”等 名 词 来 称呼 日 音 生 活 环 境 里 的 事物 时 ， 我 们 
可 以 百分之百 地 肯定 对 方 知 道 我 们 说 的 是 什么 ， 这 是 因为 人 们 对 这 些 


名 词 所 代表 的 东西 有 着 同样 的 认识 。 于 是 ， 当 对 别人 说 “汽车 停 在 了 车 
库 里 ?时 ， 可 以 断定 他 们 不 会 理解 为 “小 鸟 关 在 了 壁橱 里 ”。 


我 们 的 “世界 对 象 模型 ”不 仅 可 以 用 来 描述 客观 存在 的 事物 ， 2 
a 例如 ， 假 设 有 个 人 同 我 问 路 ， 而 我 给 出 的 答案 十 “无 
边 第 三 栋 房 子 ”。 这 个 答案 有 没有 意义 将 取决 于 那个 人 能 否 理解 “第 

二 ”和 “左边 ”的 含义 。 如 琳 他 不 会 数 数 或 者 分 不 清 左 右 ， 则 不 管 他 是 否 
理解 这 几 个 概念 ， 我 的 回答 对 他 都 不 会 有 任何 帮助 。 在 现实 世界 里 ， 

正 是 因为 大 家 对 抽象 的 世界 对 象 模型 有 着 基本 的 共识 ， 人 们 才能 用 非 
种 简单 的 话 表 达 出 复杂 的 含义 并 得 到 对 方 的 理解 。 有 具体 到 这 里 的 例 

子 ， 你 可 以 相当 有 把 握 地 断定 ， 其 他 人 对 “第 三 ”和 “左边 ”的 理解 和 我 完 


全 一 样 


这 个 道理 对 网 页 也 同样 适用 。JavaScript 的 早期 版 本 癌 程 序 员 提 供 了 查 
询 和 操控 Web 文 档 某 些 实际 内 容 (主要 是 图 像 和 表单 ) 的 手段 。 因 为 
JavaScript 预 完 定义 了 “images” 和 “forms” 等 术语 ， 我 们 才能 像 下 面 这 样 
0 | 用 “文档 中 的 第 三 个 图 像 ” 或 “文档 中 名 为 "details' 的 


document .images[2] 
document ,forms[ 'details '] 


现在 的 人 们 通常 把 这 种 试验 性 质 的 初级 DOM 称 为 “第 0 级 DOM” (DOM 

Level 0) 。 在 还 未 形成 统一 标准 的 初期 阶段 , “第 0 级 DOM2” 的 常见 用 途 

是 翻转 图 片 和 验证 表单 数据 。Netscape 和 微软 公司 各 自 推 出 第 四 代 浏 宽 
器 产品 以 后 ，DOM 开 始 遇 到 麻烦 ， 陶 入 困境 。 


1.3 ”浏览 融 战 争 


Netscape Navigator 4 发 布 于 1997 年 6 月 ，IE 4 发 布 于 同年 10 月 。 这 两 种 浏 
哆 絮 都 对 它们 的 早期 版 本 进行 了 许多 改进 ， 大 幅 扩 展 了 DOM， 使 能 够 
通过 JavaScript 完 成 的 功能 大 大 增加 。 而 网 页 设计 人 员 也 开始 接触 到 一 
个 新 名 词 : DHTML 。 


1.3.1 DHIML 


DHTML 是 “Dynamic HIML” (动态 HTML) 的 简称 。DHTML 并 不 是 一 
项 新 技术 ， 而 是 描述 HTML、CSS 和 JavaScript 技 术 组 合 的 术语 。 
DHTML 背 后 的 含义 是 : 

。 利 用 HTML 把 网 页 标记 为 各 种 元 系 ; 

。 利 用 CSS 设 置 元 素 样式 和 它们 的 显示 位 置 ; 

。 利用 JavaScript 实 时 地 操控 页 面 和 改变 样式 。 


利用 DHTML， 复 洒 的 动画 效 末 一 下 子 变 得 非常 容易 实现 。 例 如 ， 用 
HTML 标 记 一 个 页 面 元 素 : 


<div id="myelement">This is my element</div> 


然后 用 CSS 为 这 个 页 面 元 素 定 义 如 下 位 置 样式 : 


#myelement { 
position: absolute; 
left: S50Opx; 


top: 100px; 


接 下 来 ， 只 需 利 用 JavaScript 改 变 myelement 元 素 的 left 和 top 样 
式 ， 就 可 以 让 它 在 页 面 上 随意 移动 。 不 过 ， 这 只 是 理论 而 已 。 


不 邓 的 是 ，NN 4 和 IE 4 浏览 器 使 用 的 是 两 种 不 兼容 的 DOM 。 换 人 句 话 
说 ， 昌 然 浏 览 右 制造 商 的 目标 一 样 ， 但 他 们 在 解决 DOM 问 题 时 采用 的 
办 法 却 完 全 不 同 。 

1.3.2 ”浏览 器 之 间 的 冲突 


Netscape 公 司 的 DOM 使 用 了 专 有 元 素 ， 这 些 元 素 称 为 层 (layer) 。 层 
有 唯一 的 ID ，JavaScript 代 码 需要 像 下 面 这 样 引 用 它们 : 


document ,ayers[ 'myelement '] 


而 在 微软 公司 的 DOM 中 这 个 元 素 必 须 像 下 面 这 样 引 用 : 


document.all['myelement'] 


这 两 种 DOM 的 差异 并 不 止 这 一 点 。 假 设 你 想 找 出 myelement 元 素 的 
left 位 置 并 把 它 赋 值 给 变量 xpos ， 那 么 在 Netscape Navigator 4 浏览 
右 里 必须 这 样 做 : 


var xpos = document.layers['myelement'].1eft; 


而 在 IE 4 浏览 右 中 ， 需 要 使 用 如 下 所 示 的 语句 才能 完成 同样 的 工作 : 


var xpos = document.all['myelement'].1leftpos; 


这 束 导 致 了 一 种 很 可 笑 的 局 面 : 程序 员 在 编写 DOM 脚 本 代码 时 必须 知 
道 它 们 将 运行 在 哪 种 浏览 器 环境 里 ， 所 以 在 实际 工作 中 ， 许 多 脚本 都 

不 得 不 编写 两 次 ， 一 次 为 Netscape Navigator， 另 一 次 为 JE。 同时， 为 了 
确保 能 够 正确 地 疝 不 同 的 浏 贤 絮 提供 与 之 相应 的 脚本 ， 程 序 员 还 必须 

编写 一 些 代 码 去 探查 在 客户 端 运 行 的 浏 斋 融 到 确 是 哪 一 种 。 


DHTML 打 开 了 一 个 充满 机 会 的 新 世界 ， 但 想 要 进入 其 中 的 人 们 却 发 现 
这 是 个 充满 百 难 的 世界 。 因 此 ， 没 多 久 ，DHTML 束 从 一 个 大 热门 变 成 
了 一 个 人 们 不 愿 提起 的 名 词 ， 而 对 这 种 技术 的 评价 也 很 快 地 变 成 了 “ 宣 
传 嗓 头 ” 和 ”难以 实现 ”。 


1.4 制定 标准 


就 在 浏览 器 制造 商 以 DOM 为 武器 展开 营销 大 战 的 同时 ，W3C 不 事 声 张 
地 结合 大 家 的 优点 推出 了 一 个 标准 化 的 DOM。 令 人 欣慰 的 是 ， 
Netscape、 微 软 和 其 他 一 些 浏 贤 器 制造 商 们 还 能 抛 开 彼此 的 敌意 而 与 
人 并 于 1998 年 10 月 完成 了 “第 1 级 DOM” (DOM 
Level 1) 。 


回 到 刚才 的 例子 ， 我 们 已 经 用 <div> 标签 定义 了 一 个 ID 为 nyelement 
的 页 面 元 素 ， 现 在 需要 找 出 它 的 left 位置 并 把 这 个 值 保存 到 变量 
xpos 中 。 下 面 是 使 用 新 的 标准 化 DOM 时 需要 用 到 的 语法 : 


var xpos = document .getE1LementById( 'myelement').style.1left 


乍 看 起 来 ， 这 与 刚才 那 两 种 非 标准 化 的 专 有 DOM 相 比 并 没有 明显 的 改 
进 。 但 事实 上 ， 标 准 化 的 DOM 有 着 非常 远大 的 抱负 。 


浏览 器 制造 商 们 感 兴趣 的 只 不 过 是 通过 JavaScript 操 控 网 页 的 具体 办 
法 ， 但 W3C 推 出 的 标准 化 DOM 却 可 以 让 任何 一 种 程序 设计 语言 对 使 用 
任何 一 种 标记 语言 编写 出 来 的 任何 一 份 文档 进行 操控 。 


1.4.1 浏览 器 以 外 的 考虑 


DOM 是 一 种 API (应 用 编程 接口 ) 。 人 简单 地 说 ，API 就 是 一 组 已 经 得 到 
有 关 各 方 共 同 认可 的 基本 约定 。 在 现实 世界 中 ， 相 当 于 API 的 例子 包括 
(但 不 限于 ) 摩尔 斯 码 、 国 际 时 区 、 化 学 元 素 周 期 表 。 以 上 这 些 都 是 
不 同学 科 领 域 中 的 标准 ， 它 们 使 得 人 们 能 够 更 方便 地 交流 与 合作 。 如 
果 没 有 一 个 统一 的 标准 ， 事 情 往 往 会 演变 成 为 一 场 灾难 。 别 忘 了 ， 

混淆 英制 度量 衡 与 公 和 制度 量 衡 至 少 导致 过 一 次 火星 探测 任务 的 失败 。 


在 软件 编程 领域 中 ， 虽 然 存在 着 多 种 不 同 的 语言 ， 但 很 多 任务 却 是 相 
同 或 相似 的 。 这 也 正 是 人 们 需要 API 的 原因 。 一 旦 掌握 了 某 个 标准 ， 就 
可 以 把 它 应 用 在 许多 不 同 的 环境 中 。 虽 然 语 法 会 因为 使 用 的 程序 设计 
语言 而 有 所 变化 ， 但 这 些 约定 却 总 是 保持 不 变 的 。 


因此 ， 虽 然 本 书 的 重点 是 教会 你 如 何 通过 JavaScript 使 用 DOM， 当 你 需 
要 使 用 诸如 PHP 或 Python 之 类 的 程序 设计 语言 去 解析 XML 文档 的 时 
候 ， 你 获得 的 DOM 新 知识 将 会 有 很 大 的 帮助 。 


W3C 对 DOM 的 定义 是 : “一 个 与 系统 平台 和 编程 语言 无 天 的 接口 ， 程 
序 和 脚本 可 以 通过 这 个 接口 动态 地 访问 和 修改 文档 的 内 容 、 结 构 和 样 
式 。”W3C 推 出 的 标准 化 DOM， 在 独立 性 和 适用 范围 等 诸多 方面 ， 都 
远 远 超出 了 各 目 为 战 鸭 浏 斋 恬 制 造 商 们 推出 的 各 种 专 有 DOM 。 


1.4.2 ”浏览 器 战争 的 结局 


我 们 知道 ， 浏 览 絮 市 场 份额 大 战 中 微软 公司 战胜 了 Netscape， 具 有 讽刺 
意味 的 是 ， 专 有 的 DOM 和 HTML 标 记 对 这 个 最 终结 果 几 乎 没有 产生 影 
啊 。 正 浏 贤 需 注定 能 击败 其 他 对 手 ， 不 过 有 是 因为 所 有 运行 Windows 操 作 
系统 的 个 人 电脑 都 预 妆 了 它 。 


受 浏 览 絮 战争 影响 最 重 的 人 群 是 那些 网 站 设计 人 员 。 跨 浏览 器 开发 曾 
经 是 他 们 的 事 梦 。 除 了 刚才 提 到 的 那些 在 JavaScript 实 现 方面 的 差异 之 
外 ，Netscape Navigator 和 IE 这 两 种 浏 史 器 在 对 CSS 的 文 持 方面 也 有 许多 
非常 不 同 的 地 方 。 而 编写 那些 可 以 同时 文 持 这 两 种 浏 贤 絮 的 样式 表 和 
脚本 的 工作 也 成 了 一 种 墨色 艺术 。 


浏 贤 融 制造 商 的 目 私 姿态 遭 到 人 们 的 激烈 反对 ， 一 个 名 为 Web 标 准 计划 

(简称 WaSP，http://webstandards.org/ ) 的 小 组 应 运 而 生 。WaSP 小 组 采 
取 的 第 一 个 行动 束 是 ， 或 励 浏 贤 器 制造 商 们 采用 W3C 制 定 和 推荐 的 各 
也 惑 是 在 浏览 圳 制造 商 们 的 帮助 下 得 以 起 章 和 完善 的 那些 标 
We 


或 许 是 因为 来 目 WaSP 小 组 的 压力 ， 叉 或 许 是 因为 企业 的 内 部 决策 ， 下 
一 代 浏 贤 亏 产品 对 Web 标 准 的 文 持 得 到 了 极 天 的 改善 。 


1.4.3” 田 新 的 起 点 


早期 浏览 妖 大 战 至 今 ， 浏 览 妖 市 场 已 经 发 生 了 巨大 的 变化 ， 而 且 到 了 
今天 ， 这 一 切 也 几乎 每 天 都 有 变化 。 有 的 浏 贤 絮 ， 比 如 Netscape 
Navigator， 差 不 多 已 经 从 人 们 的 视野 中 消失 了 ， 而 新 一 代 浏 览 器 则 陆 
续 登 台 亮 相 。 苹 果 公司 在 2003 年 首次 发 布 它 的 Safari 浏 览 器 (基于 
WebKit) ， 它 从 一 开始 就 坚定 不 移 地 遵 特 DOM 标准。 今天， 包括 
Firefox、Chrome、Opera 和 IE， 以 及 一 些 基 于 WebKit 的 其 他 浏 宽 絮 都 对 
DOM 有 着 民 好 的 支持 。 很 多 最 潮 的 智能 手机 浏 唤 絮 都 在 使 用 WebKit 演 
染 引 擎 ， 推 动 着 手持 浏 贤 器 开发 不 断 问 前 ， 让 手机 上 网 的 体验 甚至 好 
过 了 使 用 某 些 桌面 浏览 右 。 


注意 WebKit (http://webkit.org ) 是 Safari 和 Chrome 采 用 的 一 个 开 
源 Web 浏 顺 器 引擎。 以 WebKit 和 Gecko (Firefox 的 核心 ， 
https://developer.mozilla.org/en/Gecko ) 为 代表 的 开源 引擎， 在 促进 


微软 的 Trident (IE 的 核心 ) 等 专 有 浏览 器 引擎 逐步 向 Web 标 准 靠拢 
方面 起 到 特别 积极 的 作用 。 


今天 ， 几 乎 所 有 的 浏览 器 都 内 置 了 对 DOM 的 支持 。20 世 纪 90 年 代 后 期 
的 浏览 器 大 战 的 硝烟 已 经 散 尽 。 现 在 的 浏览 右 厂 商 无 一 不 在 争先 鸡 后 
地 实现 最 新 规范 。 我 们 已 经 目睹 了 由 异步 数据 传输 技术 (Ajax) 所 引 
发 的 学 习 DOM 脚 本 编程 的 热潮 ， 而 HTML5 DOM 的 众多 新 特性 ， 怎 能 
不 让 人 对 Web 的 未 来 浮想 联翩 ? HTML5 极 大 地 改进 了 标记 的 语义 ， 让 
我 们 通过 <audio> 和 <video> 得 以 控制 各 种 媒体 ，<canvas> 元 素 
具备 了 完善 的 绘图 能 力 ， 浏 览 器 本 地 存储 超越 了 cookie 限 制 ， 更 有 内 置 
的 拖 放 支 持 ， 等 等 。 


Web 设 计 师 的 日 子 已 经 今 非 苷 比 。 尺 管 还 没有 一 款 浏览 右 完 美 无 瑕 地 实 
现 W3C DOM， 但 所 有 现代 浏览 器 对 DOM 特 性 的 履 盖 率 都 基本 达到 了 
95%， 而 且 每 款 浏 览 右 都 几乎 会 在 第 一 时 间 实 现 最 新 的 特性 。 这 意味 着 
什么 ? 意味 着 大 量 的 任务 都 不 必 依 靠 分 支 代码 了 。 以 前 ， 为 了 探查 浏 
览 研 ， 我 们 不 得 不 编写 大 量 分 文 判断 脚本 ， 现 在 ， 终 于 可 以 实现 “编写 
一 次 ， 随 处 运行 ”的 梦想 了 。 只 要 如 特 DOM 标准， 整 可 以 放心 大 胆 地 去 
做 ， 因 为 你 的 脚本 无 论 在 哪里 都 不 会 过 到 问题 。 


1.5 小结 


在 前 面 对 JavaScript 发 展 简 史 的 介绍 中 ， 笔 者 特别 提 到 ， 不 同 的 浏览 履 
采用 了 不 同 的 办 法 来 完成 同样 的 任务 。 这 一 无 法 回避 的 事实 不 仅 主 等 
着 如 何 编 写 JavaScript 脚 本 代码 ， 还 影响 着 JavaScript 教 科 书 的 编写 方 


起 


JavaScript 教 科 书 往往 会 提供 大 量 的 示例 代码 以 演示 这 种 脚本 语言 的 使 
用 方法 ， 而 完成 同一 项 任务 的 示例 脚本 往往 需要 为 不 同 的 浏览 器 编写 
两 识 或 更 多 次 。 融 像 你 在 绝 大 多 数 网 站 上 碍 到 的 代码 一 样 ， 在 绝 大 多 
数 JavaScript 教 科 书 的 示例 脚本 中 往往 充斥 着 大 量 的 浏览 器 探查 代码 和 
分 文 调用 结构 。 类 似 地 ， 在 JavaScript 技 术 文 档 中 ， 画 数 和 方法 的 清单 
也 往往 是 一 式 多 份 一 一 至 少 需 要 标明 哪 种 浏览 器 文 持 哪些 函数 和 方 


je 


如 今 这 种 情况 已 经 有 所 改变 。 多 亏 了 标准 化 的 DOM， 不 同 的 浏览 絮 在 
完成 同样 的 任务 时 采用 的 做 法 已 经 非常 一 致 了 。 因 此 ， 在 本 书 中 ， 当 


演示 如 何 使 用 JavaScript 和 DOM 完 成 某 项 任务 时 ， 将 不 再 需要 搬 开 主题 
去 探讨 如 何 对 付 不 同 的 浏览 器 。 如 果 无 特殊 的 必要 ， 本 书 将 尽量 避免 
涉及 任何 一 种 特定 的 浏览 器 。 


此 外 ， 我 们 在 本 书后 面 的 内 容 中 将 不 再 使 用 “DHTML” 这 个 术语 ， 因 为 
这 个 术语 与 其 说 是 一 个 技术 性 词语 ， 不 如 说 是 一 个 市 场 营 销 咕 涉 。 首 
先 ， 它 听 起 来 很 像 是 HTML 或 XHTML 语言 的 另 一 种 扩展 ， 因 而 很 容易 
造成 误解 或 混淆; 其 次 ， 这 个 术语 容易 勺 起 一 些 痛 兰 的 回忆 一 一 如 采 
你 同 20 世 纪 90 年 代 后 期 的 程序 员 们 提起 “DHTML”， 你 将 很 难 让 他 们 相 
信 它 现在 已 经 变 成 了 一 种 简单 、 易 用 的 标准 化 技术 。 


DHTML 曾 被 认为 是 HTML/XHTML、CSS 和 JavaScript 相 结合 的 产物 ， 
就 像 今 天 的 HTML5 那 样 ， 但 把 这 些 东 西 真 下 凝聚 在 一 起 的 是 DOM。 如 
果真 的 需要 来 描述 这 一 过 程 的 话 ，“DOM 脚 本 程序 设计 ”更 精确 ， 它 表 
示 使 用 W3C DOM 来 处 理 文档 和 样式 表 。DHTML 只 适用 于 Web 文 

档 , “DOM 脚 本 程序 设计 ? 则 涵盖 了 使 用 任何 一 种 支持 DOM API 的 程序 
设计 语言 去 处 理 任何 一 种 标记 文档 的 情况 。 有 具体 到 Web 文 档 ， 
JavaScript 的 无 所 不 在 使 它 成 为 了 DOM 脚 本 程序 设计 的 最 佳 选择 。 


在 正式 介绍 DOM 脚 本 程序 设计 技巧 之 前 ， 我 们 将 在 下 一 章 先 简要 地 复 
习 一 下 JavaScript 的 语法 。 


第 2 章 J avaScript 语 法 


。 操 作答 
。 条 件 语句 和 循环 语句 
。 画 数 与 对 象 


本 章 将 簿 要 复习 一 下 JavaScript 语 法 ， 并 介绍 其 中 最 重要 的 一 些 概 念 。 


2.1 ”准备 工作 


编写 JavaScript 脚 本 不 需要 任何 特殊 的 软件 ， 一 个 普通 的 文本 编辑 器 和 
一 个 Web 浏 哆 絮 就 尼 够 了 。 


用 JavaScript 编 写 的 代码 必 须 通 过 HTML/XHTML 文 档 才 能 执行 。 有 两 种 
方式 可 以 做 到 这 点 。 第 一 种 方式 是 将 JavaScript 代 码 放 到 文档 <head> 标 
签 中 的 <script> 标签 之 间 : 


<1DOCTYPE html > 
<html lang="en"> 
<head> 
<meta charset="utf-8"/> 
<title>Example</title> 
<script> 
JavaScript goes here... 


</script> 
</head> 
<body> 
Mark-up goes here... 
</body> 
</html> 


一 种 更 好 的 方式 是 把 JavaScript 代 码 存 为 一 个 扩展 名 为 .js 的 独立 文件 。 
典型 的 作法 是 在 文档 的 <head> 部 分 放 一 个 <script> 标签 ， 并 把 它 
的 src 属性 指向 该 文件 : 


<1DOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"/> 
<title>Example</title> 
<script src="file.js"></script> 


</head> 
<body> 
Mark-up goes here... 
</body> 
</html> 


但 最 好 的 做 法 是 把 <script> 标签 放 到 HTMIL 文档 的 最 后 ，</body> 
标签 之 前 : 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"/> 
<title>Example</title> 
</head> 


<body> 

Mark-up goes here... 

<script src="file.js"></script> 
</body> 
</html> 


这 样 能 使 浏览 器 更 快 地 加 载 页 面 〈 第 5 章 将 详细 讨论 这 个 问题 ) 。 


注意 ”前 面 例 子 中 的 <script> 标签 没有 包含 传统 的 
type="text/javascript" 属性 。 因 为 脚本 默认 是 Java Script， 
所 以 没 必 要 指定 这 个 属性 。 


如 果 打 算 实 践 一 下 本 章 中 的 例子 ， 用 一 个 文本 编辑 器 创建 两 个 文件 。 
先 创 建 一 个 简单 的 HTML 或 XHTML 文件 ， Ce html 之 
类 的 名 称 。 这 个 文件 中 一 定 要 包含 一 个 <script> 标签 ， 这 个 标签 的 
src 属性 设置 成 你 创建 的 第 二 个 文件 的 名 字 ， pee an Le .js。 


你 的 test .html 文件 应 该 包含 如 下 内 容 : 


<1DOCTYPE html > 

<html lang="en"> 

<head> 
<meta charset="utf-8" /> 
<title>Just a test</title> 


</head> 
<body> 
<script src="example.js"></script> 
</body> 
</html> 


可 以 把 本 章 中 的 任何 一 个 示例 复制 到 你 的 example .js 文件 中 。 虽 说 
那些 示例 没有 什么 特别 令 人 激动 的 地 方 ， 但 它们 可 以 把 有 关 的 语法 演 
示 得 明明 日 日 。 


在 本 书后 面 的 章节 里 ， 我 们 将 演示 如 何 使 用 JavaScript 改 变 文档 的 行为 
和 内 容 。 但 在 本 划 里 ， 我 们 只 使 用 一 个 简单 的 对 话 框 来 显示 消息 。 


如 有 果 改 变 了 example .js 文件 的 内 容 ， 只 需 在 Web 浏 贤 器 中 重新 载 入 
test .html 文档 即 可 看 到 效果 。Web 浏 览 右 会 立刻 解释 并 执行 你 的 
JavaScript 代 码 。 


程序 设计 语言 分 为 解释 型 和 编译 型 两 大 类 。Java 或 C++ 等 语言 需要 一 个 
编译 器 (compiler) 。 编 译 器 是 一 种 程序 ， 能 够 把 用 Java 等 高 级 语言 编 
写 出 来 的 源 代码 翻译 为 直接 在 计算 机 上 执行 的 文件 。 


解释 型 程序 设计 语言 不 需要 编译 器 它们 仅 需 要 解释 器 。 对 于 
JavaScript 语 言 ， 在 互联 网 环境 下 ，Web 浏 览 器 负责 完成 有 关 的 解释 和 
执行 工作 。 浏 贤 絮 中 的 JavaScript 解 释 器 将 直接 读 入 源 代 码 并 执行 。 浏 
哆 器 中 如 果 没 有 解释 器 ，JavaScript 代 码 束 无 法 执行 。 


用 编译 型 语言 编写 的 代码 有 借 误 ， 这 些 错误 在 代码 编译 阶段 束 能 侯 发 
现 os 中 的 错误 只 能 等 到 解释 器 执行 到 有 关 代 码 时 才 
能 被 发 现 。 


与 解释 型 语言 相 比 ， 编 译 型 语言 往往 速度 更 快 ， 可 移植 性 更 好 ， 但 它 
们 的 学 习 曲 线 也 往往 相当 陡峭 。 


JavaScript 的 优点 之 一 就 是 相当 容易 入 1 ]， 但 千 万 不 要 因此 小 看 
JavaScript， 其 实 它 能 完成 许多 相当 复杂 的 编程 任务 。 不 过 ， 本 章 主要 
介绍 它 最 基本 的 语法 和 用 法 。 


2.2 ”语法 


英语 是 一 种 解释 型 语言 。 在 阅读 和 处 理 我 们 用 英语 写 出 来 的 文字 时 ， 
你 就 相当 于 一 个 英语 解释 器 。 只 要 遵守 英语 的 语法 规则 ， 我 们 想 表达 
的 意思 就 可 以 被 正确 地 解读 。 这 些 语言 结构 方面 的 各 项 规则 ， 我 们 就 
称 之 为 “语法 ”。 


如 同 书面 的 人 类 语言 ， 每 种 程序 设计 语言 也 都 有 自己 的 语法 。 
JavaScript 的 语法 与 Java 和 C++ 语言 的 语法 非常 相似 。 


2.2.1 语句 


用 JavaScript 编 写 的 脚本 ， 与 其 他 语言 编写 出 来 的 脚本 一 样 ， 都 由 一 系 
列 指令 构成 ， 这 些 指令 叫做 语句 (statement) 。 只 有 按照 正确 的 语法 
编写 出 来 的 语句 才能 得 到 正确 的 解释 。 


J 子 很 相似 。 它 们 是 构成 任何 一 个 脚本 的 基 
Yo 


英语 语法 要 求 每 个 句子 必须 以 一 个 大 写字 母 开 汰 、 以 一 个 句号 结尾 。 
JavaScript 在 这 方面 的 要 求 不 那么 严格 ， 程 序 员 只 需 简 单 地 把 各 条 语句 
放 在 不 同 的 行 上 束 可 以 分 隔 它 们 ， 如 下 所 示 : 


first statement 
second statement 


es 同一 行 上 ， 束 必须 像 下 面 这 样 用 分 号 来 分 隔 
ei 


first statement; second Statement ， 
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我 们 建议 在 每 条 语句 的 末尾 都 加 上 一 个 分 号 ， 这 是 一 种 民 好 的 编程 习 


人 


first statement ， 
Second Statement ; 


这 样 做 让 代码 更 容易 阅读 。 让 每 条 语句 独占 一 行 的 做 法 能 更 容易 跟踪 
JavaScript 脚 本 的 执行 顺序 。 


2.2.2 ”注释 


不 是 所 有 的 语句 都 需要 JavaScript 解 释 器 去 解释 并 执行 。 有 时 你 需要 在 
脚本 中 写 一 些 仅 供 目 己 参考 或 提醒 目 己 的 信息 ， 你 希望 JavaScript 解 释 
器 能 直接 名 略 掉 这 些 信息 。 这 类 语句 就 是 注释 (comment) 。 


注释 能 有 效 帮 助 你 了 解 代码 流程 。 在 代码 中 它们 扮演 生活 中 便条 的 角 
色 ， 可 以 帮助 你 弄 清 楚 你 的 脚本 到 奈 干 了 些 什 么 。 


有 多 种 方式 可 以 在 JavaScript 脚 本 中 插入 注释 。 例 如 ， 如 果 用 两 个 笠 线 
作为 一 行 的 开始 ， 这 一 行 束 会 被 当成 一 条 注释 : 


自我 提醒 : 有 注释 是 好 事 


如 琳 使 用 这 种 注释 方式 ， 束 必须 在 每 个 注释 行 的 开头 加 上 两 个 斜 线 。 
像 下 面 这 样 的 写法 脚本 整 会 出 问题 : 


// 自我 提醒 : 
有 注释 是 好 事 


必须 把 它们 写成 类 似 下 面 这 样 才 行 : 


// 自我 提醒 : 
// 有 注释 是 好 事 


如 朱 打 算 广 释 很 多 行 ， 你 可 以 在 注释 内 容 的 开头 加 上 一 个 斜 线 和 一 个 
星 号 (/* ) ， 在 注释 内 容 的 末尾 加 上 一 个 星 号 和 一 个 斜 线 (*/) 。 
下 面 是 一 个 多 行 注释 的 例子 : 


这 种 注释 方式 在 需要 插入 大 段 注 秋 时 很 有 用 ， 它 可 以 提高 到 个 脚本 的 
可 读 性 。 


还 可 以 使 用 HTML 风 格 的 注释 ， 但 这 种 做 法 仅 适 用 于 单行 注释 。 其 实 
JavaScript 解 释 器 对 “<1 - - ”的 处 理 与 对 “// ”的 处 理 是 一 样 的 : 


-- 这 是 JavaScript 


如 果 是 在 HTML 文 档 中， 还 需要 以 “- -> ”来 结束 注释 ， 如 下 所 示 : 


<!-- 这 是 HTML 中 的 注释 --> 


但 JavaScript 不 要 求 这 样 做 ， 它 会 把 *- -> ” 视 为 注释 内 容 的 一 部 分 。 


请 注意 ，HTML 人 允许 上 面 这 样 的 注释 跨越 多 个 行 ， 但 JavaScript 要 求 这 
种 注释 的 每 行 都 必须 在 开头 加 上 “<!- - ”来 作为 标志 。 


因为 JavaScript 解 释 器 在 处 理 这 种 风格 的 注释 时 与 大 家 所 熟悉 的 HTML 
做 法 不 同 ， 为 避免 发 生 混 消 ， 最 好 不 要 在 JavaScript 脚 本 中 使 用 这 种 风 
格 的 注释 。 建 议 大 家 用 “// ”来 注释 单行 ， 用 “/* ”注释 多 行 。 


2.2.3 ”变量 


在 日 常生 活 里 ， 有 些 东西 是 固定 不 变 的 ， 有 些 东 西 则 会 发 生变 化 。 例 
如 ， 人 的 姓名 和 生日 是 固定 不 变 的 ， 但 心情 和 年 龄 却 会 随 着 时 间 变 化 
而 变化 。 人 们 把 那些 会 发 生变 化 的 东西 称 为 变量 (variable) 。 


我 的 心情 会 随 着 我 的 感受 变化 而 变化 。 假 设 我 有 一 个 变量 mood (意思 
是 “心情 ”) ， 我 可 以 把 此 时 此 刻 的 心情 存放 到 这 个 变量 中 。 不 管 这 个 
变量 的 值 是 "happy” 还 是 “sad”， 它 的 名 字 始 终 征 mood 。 我 可 以 随时 改 
2 个 全 


类 似 地 ， 假 设 我 现在 的 年 龄 是 33 罗 。 一 年 之 后 ， 我 的 年 龄 或 是 34 多 。 
我 可 以 使 用 变量 age 来 存放 我 的 年 龄 并 在 生日 那天 改变 这 个 值 。 当 我 
现在 去 查看 age 变量 时 ， 它 的 值 是 33; 但 一 年 之 后 ， 它 的 值 将 变 成 
34° 


把 值 存 入 变量 的 操作 称 为 赋值 assignment) 。 我 把 变量 mood 赋值 
为 “happy”， 把 变量 age 赋值 为 33。 


在 JavaScript 中 你 可 以 这 样 给 这 些 变 量 赋值 : 


mood = "happy"; 


age = 33; 


一 变量 被 赋值 以 后 ， 我 们 就 说 该 变量 包含 这 个 值 。 变 量 mood 现在 
人 台 值 happy”， 变 量 age 现在 包含 值 33。 我 们 可 以 用 如 下 所 示 的 语句 
并 这 两 个 四 量 的 值 显示 在 一 个 弹出 式 警 告 窗口 中 : 


alert (mood); 
alert (age); 


图 2-1 是 一 个 显示 mood 变量 值 的 例子 。 


happy 


图 2-1 


图 2-2 是 一 个 显示 age 变量 值 的 例子 。 


图 2-2 

我 们 会 在 本 书后 面 的 章节 中 利用 变量 做 一 些 很 有 用 的 事情 ， 别 着 急 。 

请 注意 ，JavaScript 人 允许 程 序 员 直接 对 变量 赋值 而 无 需 事 先 声明 。 这 在 
许多 程序 设计 语言 中 是 不 允许 的 。 有 很 多 语言 要 求 在 使 用 任何 变量 之 
前 必须 先 对 它 做 出 “介绍 ”， 也 称 为 声明 (declare) 

在 JavaScript 脚 本 中 ， 如 果 程 序 员 在 对 某 个 变量 赋值 之 前 未 声明 ， 赋 值 
操作 将 自动 声明 该 变量 。 虽 然 JavaScript 没 有 强制 要 求 程序 员 必 须 提前 


声明 变量 ， 但 提前 声明 变量 是 一 种 良好 的 编程 习惯 。 下 面 的 语句 对 变 
量 mood 和 age 做 出 了 声明 : 


Var mood; 
Var age; 


不 必 单 独 声明 每 个 变量 ， 你 也 可 以 用 一 条 语句 一 次 声明 多 个 变量 : 


var mood, age; 


你 甚至 可 以 一 石 两 马 : 把 声明 变量 和 对 该 变量 风 值 一 次 完成 : 


var mood = "happy"; 


var age = 33; 


甚至 还 可 以 像 下 面 这 样 : 


var mood = "happy", age = 33; 


像 上 面 这 样 声明 和 赋值 是 最 有 效率 的 做 法 ， 这 一 条 语句 的 效果 相当 于 
下 面 这 些 语句 的 总 和 1 


Var mood, age; 


mood = "happy"; 
age = 33; 


在 JavaScript 语 言 里 ， 变 量 和 其 他 语法 元 素 的 名 字 都 是 区 分 字母 大 小 写 
的 。 名 字 是 mood 的 变 量 与 名 字 是 Mood 、 MOOD 或 m00d 的 变量 没有 任 
ee. 它们 不 是 同一 个 变量 。 下 面 的 语句 是 在 对 两 个 不 同 的 变量 进 
行 赋值 : 


var mood = "happy"; 


MOOD = "sad"; 


ee 量 各 中 包 合 空 格 或 标 扣 符号 (美元 符号 “$ ” 例 
。 下面 这 条 语句 将 导致 语法 错误 : 


var my mood = "happy"; 


JavaScript 变 量 名 人 允许 包 含 字 母 、 数 字 、 美 元 符号 和 下 划 线 (但 第 一 个 
字符 不 允许 是 数字 ) ,为 了 让 比较 长 的 变量 名 更 容易 阅读 ， 可 以 在 变 
量 名 中 的 适当 位 置 插 入 下 划 线 ， 就 像 下 面 这 样 : 


var my_mood = "happy"; 


另 一 种 方式 是 使 用 驼峰 格式 (camel case)， 删 除 中 间 的 空白 (下 划 
线 ) ， 后 面 的 每 个 新 单词 改 用 大 写字 母 开 头 : 


var myMood = "happy"; 


通 各 驼峰 格式 是 国 数 名 、 方 法 名 和 对 象 属性 名 命名 的 首选 格式 。 


在 上 面 这 条 语句 中 ， 单 词 “happy” 是 JavaScript 语 言 中 的 一 个 字面 量 
(literal) ， 也 就 是 可 以 直接 在 JavaScript 代 码 中 写 出 来 的 数据 。 文 

本 “happy” 除 了 表示 它 目 己 以 外 不 表示 任何 别 的 东西 ， 正 如 大 力 水 手 

Popeye 的 名 言 :“ 它 就 是 它 ! ”与 此 形成 对 照 的 是 ， 单 词 “var”* 是 一 个 天 

键 字 ，my_mood 是 一 个 变量 名 字 。 


2.2.4 数据 类 型 


变量 mood 的 值 是 一 个 字符 串 ， 变 量 age 的 值 则 是 一 个 数 。 虽 然 它们 
是 两 种 不 同类 型 的 数据 ， 但 在 JavaScript 中 对 这 两 个 变量 进行 声明 和 赋 
值 的 语法 却 完全 一 样 。 有 些 其 他 的 语言 要 求 在 声明 变量 的 同时 还 必须 
同时 声明 变量 的 数据 类 型 ， 这 种 做 法 称 为 类 型 声明 (typing) 。 

必须 明确 类 型 声明 的 语言 称 为 强 类 型 (strongly typed) 语言 。 
JavaScript 不 需要 进行 类 型 声明 ， 因 此 它 是 一 种 弱 类 型 《weakly typed) 
语言 。 这 意味 着 程序 员 可 以 在 任何 阶段 改变 变量 的 数据 类 型 。 


以 下 语句 在 强 类 型 语言 中 是 非法 的 ， 但 在 JavaScript 里 却 完全 没有 问 
题 : 


var age = "thirty three" 


age = 33; 


JavaScript 并 不 在 意 变 量 age 的 值 是 一 个 字符 串 还 是 一 个 数 。 
接 下 来 ， 我 们 一 起 来 复习 一 下 JavaScript 中 最 重要 的 几 种 数据 类 型 。 


01. 字符 串 


字符 串 由 零 个 或 多 个 字符 构成 。 字 符 包 括 (但 不 限于 ) 字母 、 数 
字 、 标 点 符号 和 空格 。 字 符 串 必须 包 在 引号 里 ， 单 引号 或 双 引 号 
都 可 以 。 下 面 这 两 条 语句 舍 义 完全 相同 : 


你 可 以 随意 选用 引号 ,但 最 好 是 根据 字符 串 所 包含 的 字符 来 选 
择 。 如 末 字 符 串 包含 双 引号 ， 就 把 整个 子 符 串 放 在 单 引 号 里 ;如 
果 字 符 串 包含 单 引号 ， 就 把 整个 字符 串 放 在 双 引 号 里 : 


var mood = "don't ask'"， 


如 有 果 想 在 上 面 这 条 语句 中 使 用 单 引 号 ， 束 必须 保证 字母 “nm” 和 “t”* 之 
间 的 单 引 号 能 被 当成 这 个 字符 串 的 一 部 分 。 这 种 情况 下 这 个 单 引 
号 需要 被 看 做 一 个 普通 字符 ， 而 不 是 这 个 字符 串 的 结束 标志 。 这 
种 情况 我 们 需要 对 这 个 字符 进行 转 义 (escaping) 。 在 JavaScript 里 
用 反 斜 线 对 字符 进行 转 义 : 


var mood = 'don\'t ask ' ， 


类 似 地 ， 如 来 想 用 双 引 号 来 包 住 一 个 本 身 就 包含 双 引 号 的 字符 
串 ， 束 必须 用 反 斜 线 对 字符 串 中 的 双 引 号 进行 转 义 : 


var height = "about 5'10\" tall"; 


实际 上 这 些 反 射线 并 不 是 字符 串 的 一 部 分 。 你 可 以 自己 去 验证 一 
下 : 把 下 面 这 上 段 代码 添加 到 你 的 example .js 文件 中 ， 然 后 重新 
加 载 test ,html 文件 : 


var height = "about 5'10\" tall"; 


alert(height); 


图 2-3 是 用 反 斜 线 对 有 关 字 符 转 义 的 一 个 屏幕 输出 示例 。 
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图 2-3 
我 个 人 比较 喜欢 用 双 引 号 来 包 住 字符 串 。 作 为 一 个 好 的 编程 习 


惯 ， 不 管 选择 用 双 引 号 还 是 单 引号 ， 请 在 整个 脚本 中 保持 一 致 。 
如 果 在 同一 个 脚本 中 一 会 儿 使 用 双 引 号 ， 一 会 儿 又 使 用 单 引 号 ， 
代码 很 快 就 会 变 得 难以 阅读 和 理解 。 

02. 数值 


如 有 果 想 给 一 个 变量 赋 一 个 数值 ， 不 用 限定 它 必 须 是 一 个 整数 。 
JavaScript 人 允许 使 用 带 小 数 点 的 数值 ， 并 且 人 允许 任意 位 小 数 ， 这 样 
的 数 称 为 浮 点 数 (floating-point number) : 


var age = 33.25; 


也 可 以 使 用 负数 。 在 有 关 数 值 的 前 面 加 上 一 个 减 号 (-) 表示 它 是 


一 个 负数 : 


var temperature = -20; 


JavaScript 也 文 持 负数 浮 点 数 : 


var temperature = -20.33333333 


以 上 是 数值 数据 类 型 的 例子 。 
03. 布尔 值 
一 种 重要 的 数据 类 型 是 布尔 (boolean) 类 型 。 
尔 数据 只 有 两 个 可 选 值 - true 或 false 。 假 设 需要 这 样 一 
变量 : 如 采 我 正在 睡觉 ， 这 个 变量 将 存储 一 个 值 ， 如 采 我 没有 
睡觉 ， 这 个 变量 将 存储 男 一 个 值 。 可 以 用 字符 串 数据 类 型 把 变量 
赋值 为 “sleeping” 或 “not sleeping”， 但 使 用 布尔 数据 类 型 显然 是 一 
个 更 好 的 选择 : 


= 


var sleeping = true; 


从 某 种 意义 上 讲 ， 为 计算 机 设计 程序 就 是 与 布尔 值 打 交道 。 作 为 
最 基本 的 事实 ， 所 有 的 电子 电路 只 能 识别 和 使 用 布尔 数据 : 电路 
中 有 电流 或 是 没有 电流 。 不 管 是 使 用 术语 true 和 false、yes 和 no 或 
者 1 和 0， 重 要 的 是 只 能 取 两 种 可 取 值 中 的 一 种 。 


布尔 值 不 是 字符 串 ， 千 万 不 要 把 布尔 值 用 引号 括 起 来 。 布 尔 值 
false 与 字符 串 值 "false" 是 两 码 事 ! 


下 面 这 条 语句 将 把 变量 married 设置 为 布尔 值 true : 


var married = true; 


下 面 这 条 语句 把 变量 married 设置 为 字符 串 *true ”: 


var married = "true"; 


2.2.5 ”数组 


字符 串 、 数 值 和 布尔 值 都 是 标量 (scalar) 。 如 果 某 个 变量 是 标量 ， 它 
在 任意 时 刻 束 只 能 有 一 个 值 。 如 有 果 想 用 一 个 变量 来 存储 一 组 值 ， 就 需 
要 使 用 数组 (array) - 


数组 是 指 用 一 个 变量 表示 一 个 值 的 集合 ， 集 合 中 的 每 个 值 都 是 这 个 数 
组 的 一 个 元 素 (element) 。 例 如 ， 我 们 可 以 用 名 为 beatles 的 变量 来 
保存 Beatles 乐 队 全 体 四 位 成 员 的 姓名 。 


在 JavaScript 中 ， 数 组 可 以 用 关键 字 Array 声明 。 声 明 数 组 的 同时 还 可 
以 指定 数组 初始 元 素 个 数 ， 也 就 是 这 个 数组 的 长 度 (length) : 


var beatles = Array(4); 


有 时， 我 们 无 法 预知 茶 个 数组 有 多 少 个 元 素 。 没 有 大 系 ，JavaScript 人 机 
本 不 要 求 在 声明 数组 时 必须 给 出 元 素 个 数 ， 我 们 完全 可 以 在 声明 数组 
时 不 给 出 元 系 个 数 : 


Var beatles = Array(); 


向 数组 中 添加 元 素 的 操作 称 为 填充 (populating) 。 在 填充 数组 时 ， 不 
仅 需 要 给 出 新 元 素 的 值 ， 还 需要 给 出 新 元 素 在 数组 中 的 存放 位 置 ， 这 
个 位 置 就 是 这 个 元 素 的 下 标 (index) 。 数 组 里 一 个 元 素 一 个 下 标 。 下 
标 必须 用 方 括号 括 起 来 : 


array[index] = element; 


现在 来 填充 刚才 声明 的 beatles 数组 ， 我 们 按照 Beatles 乐 队 成 员 的 传 
统 顺 序 ( 即 John、Paul、George 和 Ringo) 进行 填充 。 第 一 个 : 


beatles[0] = "John'”，; 


用 0 而 不 是 1 作为 第 一 个 下 标 多 少 会 让 人 感到 有 些 不 习惯 ， 这 是 
JavaScript 世 界 里 的 一 条 规则 ， 所 以 我 们 只 能 这 么 做 。 人 们 很 容易 忘记 
这 一 点 ， 很 多 程序 员 新 手 在 刚 接触 数组 时 经 常 在 这 个 问题 上 犯错 误 。 


下 面 是 声明 和 填充 beatles 数组 的 全 过 程 : 


var beatles = Array(4); 
"John"; 
"Paul"; 


"George"; 
"Ringo"; 


beatles[3] 


我 们 现在 可 以 在 脚本 中 通过 下 标 值 *2”(beatles[2] ) 来 获取 元 

素 “George” 了 。 请 注意 ，beatles 数组 的 长 度 是 4， 但 它 最 后 一 个 元 素 
的 下 标 却 是 3。 因 为 数组 下 标 是 从 0 开始 计数 的 ， 你 或 许 需 要 一 些 时 间 
才能 习惯 这 一 事实 。 


像 上 面 这 样 填充 数组 未 免 有 些 太 烦 。 有 一 种 相对 人 商 单 的 方式 : 在 声明 
数组 的 同时 对 它 进行 填充 。 这 种 方式 要 求 用 逗号 把 各 个 元 聚 阳 开 : 


var beatles = Array( "John", "Paul", "George", "Ringo" ); 


上 面 这 条 语句 会 为 每 个 元 素 目 动 分 配 一 个 下 标 : 第 一 个 下 标 是 0， 第 二 
个 是 1， 依 次 类 推 。 因 此 ，beatles[2] 仍 将 对 应 于 取 值 为 “George” 的 元 


力 、 


我 们 甚至 用 不 着 明确 地 表明 我 们 是 在 创建 数组 。 事 实 上 ， 只 需 用 一 对 
方 括号 把 各 个 元 素 的 初始 值 括 起 来 吏 可 以 了 : 


var beatles = [ "John", "Paul", "George", "Ringo" ]; 


数组 元 素 不 必 非 得 是 字符 串 。 可 以 把 一 些 布尔 值 存 入 一 个 数组 ， 还 可 
以 把 一 组 数值 存 入 一 个 数组 : 


var years = [ 1940, 1941, 1942, 1943 |]; 


甚至 可 以 把 这 3 种 数据 类 型 混在 一 起 存 入 一 个 数组 : 


var lennon = [ "John", 1940, false |]; 


数组 元 素 还 可 以 是 变量 : 


var name = "John"; 


beatles[0] = name; 


这 将 把 beatles 数组 的 第 一 个 元 素 赋值 为 "John”。 


数组 元 素 的 值 还 可 以 是 另 一 个 数组 的 元 素 。 下 面 两 条 语句 将 把 
beatles 数组 的 第 二 个 元 系 赋 值 为 “Paul”: 


var names = [ "Ringo", "John", "George", "Paul" ]; 
beatles[1] = names[3]; 


事实 上 ， 数 组 还 可 以 包含 其 他 的 数组 ! 数组 中 的 任何 一 个 元 素 都 可 以 
把 一 个 数组 作为 它 的 值 : 


var lennon = [ "John", 1940, false |]; 
var beatles = []; 


beatles[0] = lennon,; 


现在 ，beatles 数组 的 第 一 个 元 素 的 值 是 为 外 一 个 数组 。 要 想 获 得 那 
个 数组 里 的 某 个 元 素 的 值 ， 需 要 使 用 更 多 的 方 括号 。beatles[0][9] 


的 值 是 “John”，beatles[90][1] 的 值 是 1940，beatles[9][2] 的 值 
是 false 。 


这 年 一 种 功能 相当 强大 的 存储 和 获取 信息 的 方式 ， 但 如 采 不 得 不 记 住 
每 个 下 标 数字 的 话 (尤其 是 需要 从 零 开 始 数 的 时 候 ) ， 编 程 工作 将 是 
一 种 非常 痛苦 和 麻烦 的 体验 。 玛 好 还 有 几 种 办 法 可 以 填充 数组 。 首 先 
看 看 一 种 更 可 读 的 填充 数组 的 方式 ， 然 后 介绍 存放 数据 的 自选 方式 : 
将 数据 保存 为 对 象 。 


关联 数组 
beatles 效 组 是 传统 数组 的 典型 例 于 : 每 个 元 素 的 下 标 是 一 个 数字 ， 


每 增加 一 个 元 素 ， 这 个 数字 束 依 次 增加 1。 第 一 个 元 素 的 下 标 是 0， 第 
二 个 元 素 的 下 标 是 1， 依 次 类 推 。 


如 条 在 填充 数组 时 只 给 出 了 元 素 的 值 ， 这 个 数组 吏 将 是 一 个 传统 交 
组 ， 它 的 各 个 元 素 的 下 标 将 被 目 动 创建 和 刷新 。 


可 以 通过 在 填充 数组 时 为 每 个 新 元 素 明 确 地 给 出 下 标 来 改变 这 种 默认 
0 不 必 局 限于 使 用 整数 数字 。 你 可 以 
字符 串 : 


var lennon = Array() 
lennon["name"] = "John"; 


lennon["year"] = 1940; 
lennon["living"] = false; 


这 样 的 数组 叫做 关联 数组 。 由 于 可 以 使 用 字符 串 来 代替 数字 值 ， 因 而 
代码 更 具有 可 读 性 。 但 是 ， 这 种 用 法 并 不 是 一 个 好 习惯 ， 不 推荐 大 家 
使 用 。 本 质 上 ， 在 创建 关联 数组 时 ， 你 创建 的 是 Array 对 象 的 属性 。 在 
JavaScript 中 ， 所 有 的 变量 实际 上 都 是 某 种 类 型 的 对 象 。 比 如 ， 一 个 布 
尔 值 就 是 一 个 Boolean 类 型 的 对 象 ， 一 个 数组 就 是 一 个 Array 类 型 的 对 
象 。 在 上 面 这 个 例子 中 ， 你 实际 上 是 给 lennon 数组 添加 了 name 、 
year 和 1iving 三 个 属性 。 理 想 情 况 下 ， 你 不 应 该 修改 Array 对 象 的 属 
性 ， 而 应 该 使 用 通用 的 对 象 (0bject ) 。 


2.2.6 ”对 象 


与 数组 类 似 ， 对 象 也 是 使 用 一 个 名 字 表 示 一 组 值 。 对 和 象 的 每 个 值 都 古 
有 。 例 如， 前 一 节 的 lennon 数组 也 可 以 创建 成 下 面 这 个 
对 象 : 


var lennon = Object(); 
lennon.name = "John"; 


lennon.year = 1940; 
lennon.1living = false,; 


与 使 用 Array 类 似 ， 创 建 对 象 使 用 0bject 关键 字 。 它 不 使 用 方 括号 和 
下 标 来 获取 元 素 ， 而 是 像 任 何 JavaScript 对 象 一 样 ， 使 用 点 号 来 获取 属 
性 。 要 了 解 与 Object 有 关 的 更 多 内 容 ， 请 参考 本 章 2.7 阁 。 


创建 对 象 还 有 一 种 更 简 洛 的 语法 ， 即 花 括 号 语法 : 


{ propertyName :Value，propertyName :Value } 


比如 ，lennon 对 象 也 可 以 写成 下 面 这 样 : 


var lennon = { name:"John", year:1940, living:false }; 


属性 名 与 JavaScript 变 量 的 命名 规则 有 相同 之 处 ， 属 性 值 可 以 是 任何 
JavaScript 值 ， 包 括 其 他 对 象 。 


用 对 象 来 代替 传统 数组 的 做 法 意味 着 可 以 通过 元 素 的 名 字 而 不 是 下 标 
数字 来 引用 它们 。 这 大 大 提 融 了 脚本 的 可 读 性 。 


下 面 ， 我 们 将 创建 一 个 新 的 beatles 数组 ， 并 用 刚才 创建 的 lennon 
对 象 来 填充 它 的 第 一 个 元 素 。 


var beatles = Array(); 
beatles[0] = lennon,; 


现在 ， 不 需要 使 用 那么 多 数 束 可 以 获得 想 要 的 元 素 。 我 们 不 能 使 用 
beatles[0][90] 而 是 使 用 beatles[0] .name 得 到 值 ‘John”。 


在 此 基础 上 ， 还 可 以 做 进一步 的 改进 : 把 beatles 数组 也 声明 为 对 象 
而 不 是 传统 数组 。 这 样 一 来 ， 我 们 束 可 以 用 “drummer” 或 bassist” 等 更 
有 意义 且 更 容易 记忆 的 字符 串 值 而 不 是 一 些 枯燥 乏味 的 整数 一 一 
作为 下 标 去 访问 这 个 数组 里 的 元 素 了 : 


var beatles = {}; 
beatles.vocalist = lennon; 


现在 ，beatles .vocalist ,name 的 值 是 “John”， 
beatles .vocalist ,year 的 值 是 1940， 
beatles.vocalist .living 的 值 是 false 。 


2.3 ”操作 


此 前 给 出 的 示例 都 非常 简单 ， 只 是 创建 了 一 些 不 同类 型 的 变量 而 已 。 
要 用 JavaScript 做 一 些 有 用 的 工作 ， 还 需要 能 够 进行 计算 和 处 理 数 据 。 
也 就 是 需要 完成 一 些 操作 (operation) 。 


算术 操作 符 


加 法 是 一 种 操作 ， 减 法 、 除 法 和 乘法 也 是 。 这 些 算术 操作 (arithmetic 
operation) 中 的 每 一 种 都 必须 借助 于 相应 的 操作 符 ”(operator) 才能 完 
成 。 操 作 符 是 JavaScript 为 完成 各 种 操作 而 定义 的 一 些 符号 。 你 其 实 已 
经 见 过 一 种 操作 符 了 ， 它 就 是 刚才 在 进行 赋值 时 使 用 的 等 号 (= ) 。 加 
法 操作 符 是 加 号 (+ ) ,减法 操作 符 是 减 号 (- ) ， 除 法 操作 符 是 斜 杠 
(/ ) ， 乘 法 操作 符 是 星 号 (* ) 。 


下 面 是 一 个 简单 的 加 法 操作 : 


还 可 以 把 多 种 操作 组 合 在 一 起 : 


1+4*5 


为 避免 产生 上 疏 义 ， 可 以 用 括号 把 不 同 的 操作 分 阳 开 来 : 


1+ (4* 5) 
(1+4)*5 


人 


变量 可 以 包含 操作 : 


Var total = (1+ 4) * 5; 


不 仅 如 此 ， 还 可 以 对 变量 进行 操作 : 


Var temp_fahrenheit = 95; 


Var temp_celsius = (temp_fahrenheit - 32) / 1.8; 


JavaScript 还 提供 了 一 些 非 党 有 用 的 操作 符 作为 各 种 第 用 操作 的 缩写 。 
例如 ， 如 采 想 给 一 个 数值 变量 加 上 1， 可 以 使 用 如 下 所 示 的 语句 : 


year = year + 1; 


也 可 以 使 用 ++ 操作 符 来 达到 同样 的 目的 : 


Year++， 


类 似 地 ，- - 操作 符 将 对 一 个 数值 变量 的 值 进行 城 1 操作 。 


加 号 (+ ) 是 一 个 比较 特殊 的 操作 符 ， 它 既 可 以 用 于 数值 ， 也 可 以 用 于 
子 符 串 。 把 两 个 字符 串 合 二 为 一 是 一 种 很 直观 多 人 懂 的 操作 : 


Var message = "I am feeling " + "happy"; 


像 这 样 把 多 个 字符 捉 首尾 相连 在 一 起 的 操作 叫做 拼接 
(concatenation) 。 这 种 拼接 也 可 以 通过 变量 来 完成 : 


var mood = "happy"; 
var message = "I am feeling " + mood; 


甚至 可 以 把 数值 和 字符 串 拼接 在 一 起 。 因为 JavaScript 是 一 种 弱 类 型 语 
言 ， 所 以 这 种 操作 是 允许 的 。 此 时 ， 数 值 将 被 自动 转换 为 字符 串 : 


var year = 2005; 


Var message = "The year is " + year; 


请 记 住 ， 如 琳 把 字符 串 和 数值 拼接 在 一 起 ， 其 结果 将 是 一 个 更 长 的 字 
人 符 串 ;但 如 采用 同样 的 操作 符 来 “拼接 ”两 个 数值 ， 其 结果 将 是 那 两 个 
数值 的 算术 和 。 请 对 比 下 面 两 条 alert 语句 的 执行 结果 : 


alert ("10" + 20); 
alert (10 + 20); 


第 一 条 alert 语句 将 返回 字符 串 "1020" ， 第 二 条 alert 语句 将 返回 
数值 30 。 


图 2-4 是 对 字符 串 "10" 和 数值 20 进 行 拼 接 的 结果 。 


图 2-4 
图 2-5 是 对 数值 10 和 数值 20 进 行 加 法 运算 的 结果 。 


图 2-5 


另 一 个 非常 有 用 的 快捷 操作 符 是 += ， 它 可 以 一 次 完成 "加 法 和 赋 
值 ”( 或 “拼接 和 赋值 ?) 操作 : 


var year = 2010,; 


Var message = "The year is "; 
message += year; 


执行 完 上 面 这 些 语句 后 ， 变 量 message 的 值 将 是 “The year is 2010”。 
可 以 用 如 下 所 示 的 alert 对 话 框 来 验证 这 一 结果 ， 


alert(message ) ; 


这 次 对 字符 串 和 数值 进行 拼接 操作 的 结 采 如 岁 2-6 所 示 。 


图 2-6 
2.4 ”条 件 语句 


此 前 介绍 的 语句 都 是 相对 比较 简单 的 声明 或 运算 ， 而 脚本 的 真正 威力 
体现 在 它们 还 可 以 根据 人 们 给 出 的 各 种 条 件 做 出 决策 。JavaScript 使 用 
条 件 语 句 〈conditional statement) 来 做 判断 。 


在 解释 脚本 时 ， 浏 览 器 将 依次 执行 这 个 脚本 中 的 各 条 语句 ， 我 们 可 以 
在 这 个 脚本 中 用 条 件 语句 来 设置 一 个 条 件 ， 只 有 满足 了 这 一 条 件 才能 
让 更 多 的 语句 得 到 执行 。 最 常见 的 条 件 语句 是 if 语句 ， 下 面 是 if 语 
句 的 基本 语法 : 


if (condition) { 


statements,; 


条 件 必须 放 在 if 后 面 的 圆 括号 中 。 条 件 的 求 值 结 采 永远 是 一 个 布尔 
值 ， 即 只 能 是 true 或 false 。 论 括号 中 的 语句 一 一 不 管 它 们 有 和 多少 


Ny 


条 ， 只 有 在 给 定 条 件 的 求 值 结果 是 true 的 情况 下 才 会 执行 。 因 此 ， 在 
下 面 这 个 例子 中 ，alert 消息 永远 也 不 会 出 现 : 


if (1 > 2) { 
alert("The world has gone mad!"); 


因为 1 不 可 能 大 于 2， 所 以 上 面 这 个 条 件 的 值 永远 是 false 。 


在 这 条 if 语句 中 ， 我 们 有 意 把 所 有 的 东西 都 放 在 花 括 号 里 的 。 这 并 不 
是 JavaScript 的 一 项 语法 有 要 求 ， 我 们 这 么 做 只 是 为 了 让 代码 更 容易 阅 
读 六 


事实 上 ，if 语句 中 的 花 括 号 本 身 并 不 是 必 不 可 少 的 。 如 全 i 语句 中 


的 花 括 号 部 分 只 包含 着 一 条 语句 的 话 ， 那 就 可 以 不 使 用 花 括 号 ， 而 且 
这 条 if 语句 的 全 部 内 容 可 以 写 在 同一 行 上 : 


if (1 > 2) alert("The world has gone mad!"); 


不 过 ， 因 为 伦 括 号 可 以 提高 脚本 的 可 读 性 ， 所 以 在 if 语句 中 总 是 使 用 
化 括号 是 个 好 习惯 。 


if 语句 可 以 有 一 个 else 于 句 。 包 含 在 else 了 于 人 句 中 的 语句 会 在 给 定 条 
件 为 假 时 执行 : 


if (1 > 2) { 
alert("The world has gone mad!"); 
} else { 


alert("All is well with the world"); 


因为 给 定 条 件 “1>2” 的 值 为 假 (false ) ， 所 以 我 们 将 看 到 如 图 2-7 所 
示 的 结果 。 


站 中 这 入 二 | 二 ii 和 下 用 下 PIH 


图 2-7 
2.4.1 ”比较 操作 符 


JavaScript 还 提供 了 许多 几乎 只 能 用 在 条 件 语 句 里 的 操作 符 ， 其 中 包括 
诸如 大 于 (>) 、 小 于 (<) 、 大 于 或 等 于 (>=) 、 小 于 或 等 于 (<=) 
之 类 的 比较 操作 符 。 


如 琳 想 比较 两 个 值 是 否 相等 ， 可 以 使 用 “等 于 ”比较 操作 人 符 。 这 个 操作 
符 由 两 个 等 号 构成 (==) 。 别 忘 了 ， 单 个 等 号 (=) 是 用 于 完成 赋值 操 
作 的 。 如 条 在 条 件 语句 的 某 个 条 件 里 使 用 了 单个 等 号 ， 那 么 只 要 相应 
的 赋值 操作 取得 成 功 ， 那 个 条 件 的 求 值 结 采 器 将 生 true 。 


下 面 是 一 个 错误 地 进行 “等 于 "比较 的 例子 : 


var my_mood = "happy"; 
Var your_mood = "sad"; 
If (my_mood = your_mood) { 


alert("We both feel the same."); 


上 面 这 条 语句 的 错误 之 处 在 于 ， 它 是 把 变量 your_mood 赋值 给 变量 
my_mood ， 而 不 是 在 比较 它们 是 人 否 相 等 。 因为 这 个 赋值 操作 总 会 成 功 ! 
， 所 以 这 个 条 件 语句 的 结果 将 永远 是 true 。 


工 此 处 原文 有 误 ， 赋 值 运算 并 非 总 是 返回 真 值 : if(a = false) {alert('hello, 
world' ) ;} 中 的 alert 语句 就 不 会 执行 。 审 校 者 注 


下 面 才 十 进行 “等 于 ?比较 的 正确 做 法 : 


var my_mood = "happy"; 
var your_mood = "sad"; 
if (my_mood == your_mood) { 


alert("We both feel the same."); 


这 次 ， 条 件 语句 的 绪 末 是 false。 
JavaScript 还 提供 了 一 个 用 来 进行 “不 等 于 ”比较 的 操作 符 ， 它 由 一 个 感 
疏 号 和 一 个 等 号 构成 (!=) 。 


If (my_mood != your_mood) { 
alert("We're feeling different moods."); 


相等 操作 符 == 并 不 表示 产 格 相等 ， 这 一 操 很 容易 让 人 犯 糊涂 。 例 如 ， 
比较 false 与 一 个 空 字符 串 会 得 到 什么 结果 ? 


b) { 
alert("a equals b"); 


这 个 条 件 语 句 的 求 值 结果 是 true ， 为 什么 ? 因为 相等 操作 符 == 认为 
空 字符 串 与 false 的 信义 相同 。 要 进行 疗 格 比较 ， 束 要 使 用 男 一 种 等 
号 (=== ) 。 这 个 全 等 操作 符 会 执行 严格 的 比较 ， 不 仅 比较 值 ， 而 且 
会 比较 变量 的 类 型 : 


var a = false; 
var b 二 TT 


{ 
alert("a equals b"); 


| 
这 一 次 ， 条 件 表达 式 的 求 值 结 采 束 是 false 了 。 因 为 即使 可 以 认为 


false 与 空 字符 串 具 有 相同 的 侣 义 ， 但 Boolean 和 String 可 不 是 一 种 类 
型 。 


、 对 于 不 等 操作 得!= 也 是 如 此 。 如 末 想 比较 严格 不 相等 ， 束 要 使 


1 二 二 


2.4.2 ”逻辑 操作 符 


JavaScript 允 许 把 条 件 语句 里 的 操作 组 合 在 一 起 。 例 如 ， 如 果 想 检查 某 
个 变量 ， 不 妨 假设 这 个 变量 的 名 字 是 num ， 它 的 值 是 不 是 在 5~10 之 

间 ， 我 将 需要 进行 两 次 比较 操作 。 首 先 ， 比 较 这 个 变量 是 否 大 于 或 等 
于 5， 然 后 ， 比 较 这 个 变量 是 否 小 于 或 等 于 10。 这 两 次 比较 操作 称 为 逻 
辑 比较 (operand) 。 下 面 是 把 这 两 个 逻辑 比较 组 合 在 一 起 的 具体 做 

法 : 


if ( num >= 5 && num <= 10 
alert("The number is in the right range."); 


这 里 使 用 了 “ 光 辑 与 ”操作 符 ， 它 由 两 个 “&* 字 符 构 成 (&&) ， 是 一 个 
逻辑 操作 和 从。 


逻辑 操作 符 的 操作 对 象 是 布尔 值 。 每 个 逻辑 操作 数 返 回 一 个 布尔 值 
true 或 者 是 false 。“ 光 辑 与 "操作 只 有 在 它 的 两 个 操作 数 部 是 true 


时 才 会 是 true 。 


“逻辑 或 "操作 符 由 两 个 王 直 线 字 符 构 成 (| | ) 。 只 要 它 的 操作 数 中 有 
一 个 是 true , “逻辑 或 ?操作 就 将 是 true 。 如 果 它 的 两 个 操作 数 都 是 
true ,， “逻辑 或 ?操作 也 将 是 true 。 只 有 当 它 的 两 个 操作 数 都 是 
false 时 , “逻辑 或 ?操作 才 会 是 false 。 


if ( num > 10 || num< 5 ) 
alert("The number is not in the right range."); 


} 

JavaScript 还 提供 了 一 个 “逻辑 非 ?操作 符 ， 它 由 一 个 感叹 号 (! ) 单独 
构成 “逻辑 非 ?操作 符 只 能 作用 于 单个 逻辑 操作 数 ， 其 结果 是 把 那个 
逻辑 操作 数 所 返回 的 布尔 值 取 反 。 如 果 那 个 逻辑 操作 数 所 返回 的 布尔 
值 是 true ,， “人 逻辑 非 ” 操 作 符 将 把 它 取 反 为 false : 


if ( !(1 > 2) 
alert("All is well with the world"); 


请 注意 ， 为 避免 产生 上 收 义 ， 上 面 这 条 语句 把 逻辑 操作 数 放 在 了 括号 
里 ， 因 为 我 想 让 “逻辑 非 ” 操 作 符 作 用 于 括号 里 的 所 有 内 容 。 
可 以 用 “逻辑 非 ? 操 作 符 把 整个 条 件 语 句 的 结果 颠倒 过 来 。 在 下 面 的 例 


子 里 ， 我 特意 使 用 了 一 对 括号 来 确保 “逻辑 非 ?操作 符 将 作用 于 两 个 逻 
辑 操作 数 的 组 合 结 采 : 


If (ICnum>10 || num < 5) ) { 
alert("The number IS in the right range."); 


2.5 ”循环 语句 


if 语句 或 许 是 最 重要 、 最 有 用 的 条 件 语句 了 ， 它 的 唯一 不 足 是 无 法 完 
成 重复 性 的 操作 。 在 if 语句 里 ， 包 含 在 花 括号 里 的 代码 块 只 能 执行 一 
次 。 如 果 需 要 多 次 执行 同一 个 代码 块 ， 就 必须 使 用 循环 语句 。 

循环 语句 可 以 让 我 们 反复 多 次 地 执行 同一 段 代码 。 循 环 语句 分 为 几 种 

不 同 的 类 型 ， 但 它们 的 工作 原理 几乎 一 样 : 只 要 给 定 条 件 仍 能 得 到 满 

足 ， 包 售 在 循环 语句 里 的 代码 就 将 重复 地 执行 下 去 ; 一旦 给 定 条 件 的 

求 值 结果 不 再 是 true， 人 循环 也 束 到 此 为 止 。 


2.5.1 while 循环 


while 循环 与 if 语句 非 第 相似 ， 它 们 的 语法 儿 乎 完全 一 样 : 


while (condition) { 
statements,; 


while 循环 与 if 语句 唯一 的 区 别 是 : 只 要 给 定 条 件 的 求 值 结果 是 
true ， 包 含 在 花 括 号 里 的 代码 就 将 反复 地 执行 下 去 。 下 面 是 一 个 
while 循环 的 例子 : 


var count = 1; 
while (count < 11) { 
alert (count); 


count++; 


我 们 来 仔细 分 析 一 下 上 面 这 段 代码 。 首 先 ， 创 建 数值 变量 count 并 赋 
值 为 1 ; 然后 ， 以 count < 11 一 一 意思 是 “只 要 变量 count 的 值 小 于 
11， 就 重复 执行 这 个 循环 ”一 一 为 条 件 创建 一 个 while 循环 。 在 while 
循环 的 内 部 ， 用 “++ ”操作 符 对 变量 count 的 值 执 行 加 1 操作 ， 而 这 一 
操作 将 重复 执行 10 次 。 如 果 用 Web 浏 览 器 来 观察 这 段 代 码 的 执行 情况 ， 
将 会 看 到 一 个 alert 对 话 框 内 现 了 10 次 。 这 条 循环 语句 执行 完毕 后 ， 
变量 count 的 值 将 是 11。 


注意 ”这 里 的 关键 是 在 while 循环 的 内 部 必须 发 生 一 些 会 影响 循 
环 控 制 条 件 的 事情 。 在 上 例 中 ， 我 们 在 while 循环 的 内 部 对 变量 
count 的 值 进行 了 加 1 操作 ， 而 这 将 导致 循环 控制 条 件 在 经 过 10 次 
循环 后 的 求 值 结果 变 成 false 。 如 果 我 们 不 增加 变量 count 的 
值 ， 这 个 while 循环 将 永远 执行 下 去 。 
do. . .while 循环 
类 似 于 if 语句 的 情况 ，while 循环 的 花 括 号 部 分 所 包含 的 语句 有 可 能 
不 被 执行 ， 因 为 对 循环 控制 条 件 的 求 值 发 生 在 每 次 循环 开始 之 前 ， 所 


以 如 果 循 环 控制 条 件 的 首次 求 值 结果 是 false ， 那 些 代 码 将 一 次 也 不 
会 被 执行 。 


在 某 些 场 含 ， 我 们 布 望 那些 包含 在 循环 语句 内 部 的 代码 至 少 执行 一 
次 。 这 时 ，do 循环 是 我 们 的 最 佳 选择 。 下 面 征 do 循环 的 语法 : 


do { 
statements; 


} while (condition); 


这 与 刚才 介绍 的 while 循环 非 党 相似， 但 有 个 显而易见 的 区 别 : 对 循 
环 控 制 条 件 的 求 值 发 生 在 每 次 循环 结束 之 后 。 因 此 ， 即 使 循环 控制 条 
件 的 首次 求 值 结 有 是 false ， 包 含 在 花 括 号 里 的 语句 也 至 少 会 被 执行 
一 从 © 


我 们 可 以 把 前 一 人 小节 里 的 while 循环 改写 为 如 下 所 示 的 do.. .while 
循环 : 


var count = 1; 
do { 


alert (count); 
count++; 
} while (count < 11); 


这 段 代 码 的 执行 结果 与 while 循环 完全 一 样 : alert 消息 将 闪现 10 
次 ; 在 循环 结束 后 ， 变 量 count 的 值 将 是 11。 


再 来 看 看 下 面 这 个 变 体 : 


var count = 1; 
do 
alert (count); 
count++; 


} while (count < 1); 


在 上 面 这 个 do 循环 里 ， 循 环 控制 条 件 的 求 值 结果 永远 不 为 true : 变 
量 count 的 初始 值 是 1， 所 以 它 在 这 里 永远 不 会 小 于 1。 可 是 ， 因 为 do 
循环 的 循环 控制 条 件 出 现在 花 括 号 部 分 之 后 ， 所 以 包含 在 这 个 do 循环 
内 部 的 代码 还 是 执行 了 一 次 。 也 就 是 说 ， 仍 将 看 到 一 条 alert 消息 。 


这 些 语句 执行 完毕 后 ， 变 量 count 的 值 将 是 2， 尽 管 循环 控制 条 件 的 求 
值 结 果 是 false 。 


2.5.2 ”for 循环 


用 for 循环 来 重复 执行 一 些 代码 也 很 方便 ， 它 类 似 于 while 循环 。 事 
实 上 ，for 循环 只 是 刚才 介绍 的 while 循环 的 一 种 变 体 。 如 果 仔 细 观 
察 上 一 小 节 里 的 while 循环 的 例子 ， 融 会 发 现 它们 都 可 以 改写 为 如 下 
所 示 的 样子 : 


initialize; 
while (condition) { 


statements; 
increment; 


而 for 循环 不 过 古 进 一 步 改写 为 如 下 所 示 的 紧 普 形式 而 已 : 


for (initial condition; test condition; alter condition) { 
statements; 
} 


用 for 循环 来 重复 执行 一 些 代码 的 好 处 是 循环 控制 结构 更 加 清晰 。 与 
循环 有 关 的 所 有 内 容 都 包含 在 for 语句 的 圆 括号 部 分 。 


可 以 把 上 一 小 市 里 的 例子 改写 为 如 下 所 示 的 for 循环 : 


for (var count = 1; count < 11; count++ ) { 
alert (count); 


与 循环 有 关 的 所 有 内 容 都 包含 在 for 语句 的 圆 括号 里 。 现 在 ， 当 我 们 
反 一 竺 代码 放 在 化 括号 中 间 的 上 时候， 我 们 清楚 地 知道 那些 代码 将 被 执 
行 10 次 。 


for 循环 最 常见 的 用 途 之 一 是 对 某 个 数组 里 的 全 体 元 素 进 行 遍历 处 

理 。 这 往往 需要 用 到 数组 的 array .length 属性， 这 个 属性 可 以 告诉 
我 们 在 给 定数 组 里 的 元 素 的 个 数 。 一 定 要 记 住 数组 下 标 从 0 而 不 是 1 开 
始 。 下 面 的 例子 中 ， 数 组 有 4 个 元 素 。count 变量 对 于 数组 中 每 个 元 素 
都 是 从 0 开始 按 1 递 增 。 数 到 4 时 ， 测 试 条 件 失 败 ， 循 环 终止 ，3 是 从 数 
组 中 检索 到 的 最 后 一 个 下 标 。 


var beatles = Array("John","Paul","George", "Ringo"); 
for (var count = © ; count < beatles. length; count++ ) { 


alert(beatles[count]); 


运行 这 段 代 码 ， 将 看 到 4 条 alert 消息 ， 它 们 分 别 对 应 着 Beatles 乐 队 的 
四 位 成 员 。 

2.6 ” 画 数 

如 果 需 要 多 次 使 用 同一 段 代码 ， 可 以 把 它们 封装 成 一 个 画 数 。 画 数 
(function) 就 是 一 组 允许 在 你 的 代码 里 随时 调用 的 语句 。 事 实 上 ， 每 
个 画 数 实际 上 是 一 个 短小 的 脚本 。 

作为 一 种 良好 的 编程 习惯 ， 应 该 先 对 画 数 做 出 定义 再 调用 它们 。 

下 面 是 一 个 简单 的 示例 画 数 : 


function shout() 
var beatles = Array("John","Paul","George", "Ringo"); 
for (var count = 0 ; count < beatles. length; count++ ) { 


alert(beatles[count]); 


这 个 函数 里 的 循环 语句 将 依次 弹出 对 话 框 来 显示 Beatles 乐 队 成 员 的 名 
字 。 现 在 ， 如 采 想 在 自己 的 脚本 里 执行 这 一 动作 ， 可 以 随时 使 用 如 下 
的 语句 来 调用 这 个 函数 : 


每 当 需 要 反复 做 一 件 事 时 ， 都 可 以 利用 画 数 来 避免 重复 键入 大 量 的 相 
同 内 容 。 不 过 ， 画 数 的 真正 威力 体现 在 ， 你 可 以 把 不 同 的 数据 传递 给 
它们 ， 而 它们 将 使 用 这 些 数据 去 完成 预定 的 操作 。 我 们 把 传递 给 画 数 
的 数据 称 为 参数 “(argument) 。 


定义 一 个 函数 的 语法 : 


function name(arguments) { 


statements; 


} 


JavaScript 提 供 了 许多 内 建 画 数 ， 在 前 面 多 次 出 现 过 的 alert 就 是 一 
例 。 这 个 函数 需要 我 们 提供 一 个 参数 ， 它 将 弹出 一 个 对 话 框 来 显示 这 
个 参数 的 值 。 


在 定义 函数 时 ， 你 可 以 为 它 声 明 任意 多 个 参数 ， 0 
J 在 函数 的 内 部 ， 你 可 以 像 使 用 普通 变量 那样 使 用 它 的 任 
可 一 个 参数 。 


下 面 是 一 个 需要 传递 两 个 参数 的 函数 。 如 果 把 两 个 数值 传递 给 这 个 画 
数 ， 这 个 函数 将 对 它们 进行 乘法 运算 : 


function multiply(numi1,num2) 区 


Var total = num1 * num2; 
alert(total); 


在 定义 了 这 个 函数 的 脚本 里 ， 我 们 可 以 从 任意 位 置 去 调用 这 个 函数 ， 
如 下 所 示 : 


multiply(10,2); 


把 数值 10 和 2 传递 给 multiply( ) 函数 的 结果 如 图 2-8 所 示 。 


图 2-8 


这 将 产生 这 样 一 种 视觉 效果 : 屏幕 上 会 立刻 弹出 一 个 显示 乘法 运算 结 
果 (20) 的 alert 对 话 框 。 如 果 这 个 函数 能 把 结果 返回 给 调用 这 个 函 
数 的 语句 往往 会 更 有 用 。 这 很 容易 做 到 : 男 数 不 仅 能 够 (以 参数 的 形 
式 ) 接收 数据 ， 还 能 够 返回 数据 。 


我 们 完全 可 以 创建 一 个 函数 并 让 它 返 回 一 个 数值 、 一 个 字符 串 、 一 个 
数组 或 一 个 布尔 值 。 这 需要 用 到 return 语句 : 


function multiply(numi1,num2) { 
Var total = num1 * num2; 
return total， 


下 面 这 个 函数 只 有 一 个 参数 (一 个 华氏 温度 值 ，， 它 将 返回 一 个 数值 
(同一 温度 的 摄氏 温度 值 ) : 


function convertToCelsius(temp) { 
var result = temp - 32; 
result = result / 1.8; 
return result; 


} 


函数 的 真正 价值 体现 在 ， 我 们 还 可 以 把 筷 们 当做 一 种 数据 类 型 来 使 
用 ， 这 意味 着 可 以 把 一 个 函数 的 调用 结果 赋 给 一 个 变量 : 


var temp_fahrenheit = 95; 
var temp_celsius = convertToCelsius(temp_fahrenheit); 


alert(temp_celsius); 


把 华氏 温度 值 95 转 换 为 摄氏 温度 值 的 结果 如 图 2-9 所 示 。 


图 2-9 


在 这 个 例子 里 ， 变 量 temp_celsius 的 值 将 是 35， 这 个 数值 由 
convertToCelsius 函数 返回 。 


你 一 定 想 了 解 应 该 如 何 命 名 变量 和 函数 。 在 命名 变量 时 ， 我 用 下 划 线 
来 分 隔 各 个 单词 ， 在 命名 函数 时 ， 我 从 第 二 个 蛙 词 开始 把 每 个 单词 的 
第 一 个 字母 写成 大 写 形 式 (也 就 是 所 谓 的 纶 峰 命 名 法 ) 。 我 这 么 做 是 
为 了 能 够 一 眼看 出 哪些 名 字 起 变量， 哪些 名 字 是 轴 数 。 与 变量 的 情况 
一 样 ，JavaScript 语 言 也 不 允许 钞 数 的 名 子 里 包含 空格 。 罗 峰 命名 法 可 
以 在 不 违反 这 一 规定 的 前 提 下 ， 把 变量 和 函数 的 名 字 以 一 种 既 人 简单 又 
明确 的 方式 区 分 开 来 。 


变量 的 作用 域 


前 面 讲 过 ， 作 为 一 种 好 的 编程 习惯 ， 在 第 一 次 对 某 个 变量 赋值 时 应 该 
用 var 对 其 做 出 声明 。 当 在 函数 内 部 使 用 变量 时 ， 束 更 应 该 这 么 做 。 


变量 既 可 以 是 全 局 的 ， 也 可 以 是 局 部 的 。 在 谈论 全 局 变量 和 局 部 变量 
之 间 的 区 别 时 ， 我 们 其 实 是 在 讨论 变量 的 作用 域 (scope) 。 


全 局 变量 (global variable) 可 以 在 脚本 中 的 任何 位 置 被 引用 。 一 旦 你 
在 某 个 脚本 里 声明 了 一 个 全 局 变量 ， 束 可 以 从 这 个 脚本 中 的 任何 位 置 
一 一 包括 函数 内 部 一 一 引用 它 。 全 局 变量 的 作用 域 是 整个 脚本 。 


局 部 变量 (local variable) 只 存在 于 声明 它 的 那个 函数 的 内 部 ， 在 那个 
和 


因此 ， 我 们 在 函数 里 既 可 以 使 用 全 局 变量 ， 也 可 以 使 用 局 部 变量 。 这 
很 有 用 ， 但 它 也 会 导致 一 些 问题 。 如 果 在 一 个 函数 的 内 部 不 小 心 使 用 
了 某 个 全 局 变量 的 名 字 ， 即 使 本 意 是 想 使 用 一 个 局 部 变量 ，JavaScript 
会 认为 是 在 引用 那个 全 局 变量 。 

还 好 ， 可 以 用 var 关键 字 明 确 地 为 函数 变量 设 定 作 用 域 。 

如 有 果 在 某 个 函数 中 使 用 了 var ， 那 个 变量 就 将 被 视 为 一 个 局 部 变量 ， 
它 只 存在 于 这 个 函数 的 上 下 文中 ; 反之 ， 如 采 没 有 使 用 var ， 那 个 变 
量 惑 将 被 视 为 一 个 全 局 变量 ， 如 采 脚 本 里 已 经 存在 一 个 与 之 同名 的 全 
局 变量 ， 这 个 函数 就 会 改变 那个 全 局 变量 的 值 。 


我 们 来 看 下 面 这 个 例子 : 


function Square(num) { 
total = num * num; 
return total; 


} 

Var total = 50; 

var number = square(20); 
alert(total); 


这 些 代码 将 不 可 避免 地 导致 全 局 变量 total 的 值 发 生变 化 ， 如 图 2-10 
所 示 。 


图 2-10 


全 局 变量 total 的 值 变 成 了 400。 我 的 本 意 是 让 square( ) 函数 只 把 它 
计算 出 来 的 平方 值 返回 给 变量 number ， 但 因为 未 把 这 个 函数 内 部 的 
total 变量 明确 地 声明 为 局 部 变量 ， 这 个 函数 把 名 字 同 样 是 total 的 
那个 全 局 变量 的 值 也 改变 了 。 


把 这 个 函数 写成 如 下 所 示 的 样子 才 是 正确 的 : 


function square(num) { 
Var total = num * num， 
return total， 


} 


现在 ， 全 局 变量 total 变 得 安全 了 ， 再 怎么 调用 square( ) 函数 也 不 
会 影响 到 它 。 


请 记 住 ， 画 数 在 行为 方面 应 该 像 一 个 目 给 目 足 的 脚本 ， 在 定义 一 个 男 
数 时 ， 我 们 一 定 要 把 它 内 部 的 变量 全 都 明确 地 声明 为 局 部 变量 。 如 采 
你 总 是 在 函数 里 使 用 var 关键 字 来 定义 变量 ， 束 能 避免 任何 形式 的 二 
义 性 隐患 。 


2.7 对象 


对 象 (object) 是 一 种 非常 重要 的 数据 类 型 ， 但 此 前 我 们 还 没有 认真 对 
待 它 。 对 象 是 目 包 含 的 数据 集合 ， 包 含 在 对 象 里 的 数据 可 以 通过 两 种 


形式 访问 一 一 属性 (property) 和 方法 (method) : 


。 属 性 是 隶属 于 某 个 特定 对 象 的 变量 ， 
。 方 法 是 只 有 某 个 特定 对 象 才能 调用 的 画 数 。 


对 象 就 是 由 一 些 属性 和 方法 组 合 在 一 起 而 构成 的 一 个 数据 实体 。 
在 JavaScript 里 ， 属 性 和 方法 都 使 用 “点 ”语法 来 访问 : 


Object.property 
Object ,method ( ) 


你 已 经 见 过 如 何 用 mood 和 age 等 变量 来 存放 诸如 “心情 ?和 “年 龄 ”之 类 
的 值 。 如 果 它 们 是 某 个 对 象 的 属性 一 一 这 里 不 妨 假设 那个 对 象 的 名 字 
是 Person ， 我 们 束 必 须 使 用 如 下 所 示 的 记号 来 使 用 它们 : 


Person.mood 
Person.age 


假如 Person 对 象 还 关联 着 一 些 诸如 walk( ) 和 sleep() 之 类 的 画 
、 0 而 我 们 必须 使 用 如 下 所 示 的 记号 
来 访问 它们 : 


Person.walk() 
Person.sleep() 


把 这 些 属性 和 方法 全 部 集合 在 一 起 ， 我 们 就 得 到 了 一 个 Person 对 象 。 


为 了 使 用 Person 对 象 来 描述 一 个 特定 的 人 ， 需 要 创建 一 个 Person 对 
象 的 实例 (instance) 。 实 例 是 对 象 的 具体 个 体 。 例 如 ， 你 和 我 都 是 
人 ， 都 可 以 用 Person 对 象 来 描述 ， 但 你 和 我 是 两 个 不 同 的 个 体 ， 很 可 
能 有 着 不 同 的 属性 〈 例 如 ， 你 和 我 的 年 龄 可 能 不 一 样 ) 。 因 此 ， 你 和 
我 对 应 着 两 个 不 同 的 Person 对 象 一 一 它们 虽然 都 是 Person 对 象 ， 但 
它们 是 两 个 不 同 的 实例 。 


为 给 定 对 象 创建 一 个 新 实例 需要 使 用 new 关键 字 ， 如 下 所 示 : 


var jeremy = new Person; 


上 面 这 条 语句 将 创建 出 Person 对 象 的 一 个 新 实例 jeremy。 我 们 避 ® 可 
以 像 下 面 这 样 利用 Person 对 象 的 属性 来 检索 关于 jeremy 的 信息 了 : 


Jeremy .age 
Jeremy ,mood 


对 象 、 属 性 、 方 法 和 实例 等 概念 比较 抽象 ， 为 了 让 大 家 对 这 些 概念 有 
一 个 直观 的 认识 ， 我 在 这 里 用 虚构 的 Person 对 和 象 作为 例子 。JavaScript 
里 并 没有 Person 对 象 。 我 们 可 以 利用 JavaScript 来 创建 目 己 的 对 象 
术语 为 用 户 定义 对 象 (user-defined object) 。 这 是 一 个 相当 高 级 的 
主题 ， 我 们 眼下 还 无 需 对 它 做 进一步 讨论 。 


在 电视 上 的 亮 饪 节目 里 ， 只 要 镜头 一 转 ， 厨 师 就 可 以 端 出 一 盘 美味 的 
菜肴 并 向 大 家 介绍 说 : “这 是 我 刚 做 好 的 ”。JavaScript 与 这 种 节目 里 的 
主持 人 颇 有 几 分 相似 : 它 提供 了 一 系列 预先 定义 好 的 对 象 ， 这 些 可 以 
拿 来 就 用 的 对 象 称 为 内 建 对 象 (native object) 。 


2.7.1 内 建 对 象 


你 其 实 已 经 见 过 一 些 内 建 对 象 了 ， 数 组 就 是 其 中 一 种 。 当 我 们 使 用 new 
关键 字 去 初始 化 一 个 数组 时 ， 其 实 是 在 创建 一 个 Array 对 象 的 新 实 
| . 


Var beatles = new Array(); 


当 需 要 了 解 某 个 数组 有 多 少 个 元 素 时 ， 利 用 Array 对 象 的 Length 属 
性 来 获得 这 一 信息 : 


beatles.1length,; 


[L 


Array 对 象 只 是 诸多 JavaScript 内 建 对 象 中 的 一 种 。 其 他 例子 包括 Math 
对 象 和 Date 对 象 ， 它 们 分 别提 供 了 许多 非常 有 用 的 方法 供 人 们 处 理 数 
值 和 日 期 值 。 例 如 ，Math 对 象 的 round 方法 可 以 把 十 进 制 数值 舍 入 
为 一 个 与 之 最 接近 的 整数 : 


var num = 7.561， 
var num = Math.round(num); 


alert (num); 


Date 对 象 可 以 用 来 存储 和 检索 与 特定 日 期 和 时 间 有 关 的 信息 。 在 创建 
Date 对 和 象 的 新 实例 时 ，JavaScript 解 释 器 将 自动 地 使 用 当前 日 期 和 时 间 
对 它 进 行 初始 化 : 


var current_date = new Date(); 


Date 对 象 提供 了 getDay()、getHours()、getMonth() 等 一 系 
列 方法 ， 以 供 人 们 用 来 检索 与 特定 日 期 有 天 的 各 种 信息 。 例 如 ， 
getDay( ) 方法 可 以 告诉 我 们 给 定 日 期 是 星期 几 ; 


var today = current_date.getDay( ) ， 


在 编写 JavaScript 脚 本 时 ， 内 建 对 象 可 以 帮助 我 们 快速 、 简 单 地 完成 许 


多 任务 。 
2.7.2 ”宿主 对 象 


除了 内 建 对 象 ， 还 可 以 在 JavaScript 脚 本 里 使 用 一 些 已 经 预先 定义 好 的 
其 他 对 象 。 这 些 对 象 不 是 由 JavaScript 语 言 本 身 而 是 由 它 的 运行 环境 提 
供 的 。 有 具体 到 Web 应 用 ， 这 个 环境 就 是 浏览 器 。 由 浏览 器 提供 的 预定 义 
对 象 被 称 为 宿主 对 象 (host object) 。 


宿主 对 象 包括 Form、Image 和 Element 等 。 我 们 可 以 通过 这 些 对 象 
获得 关于 网 页 上 表单 、 图 像 和 各 种 表单 元 素 等 信息 。 


本 书 没有 收录 这 几 个 宿主 对 象 的 例子 。 另 一 种 宿主 对 象 也 能 用 来 获得 
网 页 上 的 任何 一 个 元 素 的 信息 ， 它 就 是 document 对 象 。 在 本 书 的 后 
续 内 容 里 ， 我 们 将 向 大 家 介绍 document 对 象 的 许多 属性 和 方法 。 


2.8 ”小 结 


在 本 章 中 ， 我 们 介绍 了 JavaScript 语 言 的 基础 知识 。 在 本 书 的 后 续 章 节 
中 ， 我 们 会 用 到 这 里 介绍 的 许多 术语 : 语句 、 变 量 、 数 组 和 琴 数 等 。 

这 些 概 念 有 的 现在 还 不 太 容 易 理 解 ， 但 我 相信 你 在 看 过 它们 在 脚本 里 
的 实际 用 途 后 ， 就 能 彻底 搞 清楚 了 。 在 后 面 的 学 习 里 ， 如 果 需 要 重 混 
这 些 术 语 的 含义 ， 随 时 可 以 返回 到 本 章 来 。 


本 章 只 对 “对 象 " 做 了 一 个 概念 性 的 介绍 。 如 果 你 对 它 的 理解 还 不 够 全 
面 深 入 ， 别 着 急 。 我 们 将 在 下 一 章 进 一 步 探 讨 document 对 象 。 我 们 
将 先 同 大 家 介绍 一 些 与 这 个 对 象 相关 联 的 属性 和 方法 ， 它 们 都 是 由 
W3C 的 标准 DOM 提 供 的 。 


在 下 一 章 中 ， 我 们 将 介绍 基于 DOM 的 基本 编程 思路 ， 并 演示 如 何 使 用 
它 的 一 些 功能 非常 强大 的 方法 。 


第 3 章 DOM 


本 章 内 容 


。 节 点 的 概念 

。 5 个 常用 DOM 方 法 : getElementById 、 
getElementsByTagName 、getElementsByClassName 
~ getAttribute 和 setAttribute 


终于 要 与 DOM 面 对 面 了 。 本 章 将 介绍 DOM， 带 领 大 家 透 过 DOM 去 看 


1 


3.1 文档 : DOM 中 的 “D>” 


如 果 没 有 document (文档) ，DOM 也 就 无 从 谈 起 。 当 创建 了 一 个 网 
页 并 把 它 加 载 到 Web 浏 览 器 中 时 ，DOM 就 在 幕后 悄然 而 生 。 它 把 你 编 
写 的 网 页 文档 转换 为 一 个 文档 对 象 。 


在 人 类 语言 中 , “对 象 "这 个 词 的 含义 往往 不 那么 明确 ， 它 几乎 可 以 用 
。 但 在 程序 设计 语言 中 , “对 象 " 这 个 词 的 含义 非 
常 明确 。 


3.2 对象: DOM 中 的 “O>” 


在 上 一 章 的 末尾 ， 我 们 向 大 家 展示 了 几 个 JavaScript 对 象 的 例子 。 你 应 
该 还 记得 , “对象 " 是 一 种 自足 的 数据 集合 。 与 某 个 特定 对 象 相关 联 的 
变量 被 称 为 这 个 对 象 的 属性 ;只 能 通过 某 个 特定 对 象 去 调用 的 函数 被 
称 为 这 个 对 象 的 方法 。 


JavaScript 语 言 里 的 对 象 可 以 分 为 三 种 类 型 。 


。 用 户 定义 对 象 (user-defined object) : 由 程序 员 自 行 创建 的 对 象 。 
本 书 不 讨论 这 种 对 象 。 

。 内 建 对 象 (native object) : 内 建 在 JavaScript 语 言 里 的 对 象 ， 如 
Array 、Math 和 Date 等 。 

。 入 主 对 象 (host object) : 由 浏览 器 提供 的 对 象 。 


即使 是 在 JavaScript 的 最 初版 本 里 ， 对 编写 脚本 来 说 非常 重要 的 一 些 宿 
主 对 象 束 已 经 可 用 了 ， 它 们 当中 最 基础 的 对 象 是 window 对 象 。 


window 对 象 对 应 着 浏 贤 器 窗口 本 刁 ， 这 个 对 象 的 属性 和 方法 通常 统称 
为 BOM ( 浏 贤 器 对 象 模型 ) ， 但 我 觉得 称 为 Window Object Model ( 窗 
口 对 象 模 型 ) 更 为 贴切 。BOM 提 供 了 window.open 和 window.blur 
等 方法 ， 这 些 方 法 某 种 程度 上 要 为 到 处 被 滥用 的 各 种 弹出 窗口 和 下 拉 
衣 单 人 负责。 难怪 JavaScript 会 有 一 个 不 好 的 名 声 ! 


值得 庆幸 的 是 ， 我 们 不 需要 与 BOM 打 太 多 的 交道 ， 而 是 把 注意 力 集中 
在 浏览 器 窗口 内 的 网 页 内 容 上 。document 对 象 的 主要 功能 就 是 处 理 


网 页 内 容 。 在 本 书 的 后 续 内 容 里 ， 我 们 几乎 只 讨论 document 对 和 象 的 
属性 和 方法 。 


现在 ， 我 们 已 经 对 DOM 中 的 字母 *D” (document， 文 档 ) 和 字 
母 <0” (object， 对 象 ) 做 了 解释 ， 那 么 字母 <M” 又 代表 着 什么 呢 ? 


3.3” 模 型. DOM 中 的 “MP 


DOM 中 的 “<M” 代 表 着 “Model”( 模 型 ) ， 但 说 它 代表 着 “Map”( 地 图 ) 
也 未 演 不 可 。 模 型 也 好 ， 地 图 也 喷 ， 它 们 的 含义 都 是 某 种 事物 的 表现 
形式 。 就 像 一 个 模型 火车 代表 着 一 列 真正 的 火车 、 一 张 城市 街道 图 代 
表 着 一 个 实际 存在 的 城市 那样 ，DOM 代 表 着 加 载 到 浏览 器 窗口 的 当前 
网 页 。 浏 览 嚣 提供 了 网 页 的 地 图 (或 者 说 模型 ，， 而 我 们 可 以 通过 
JavaScript 去 读 取 这 张 地 图 。 


既然 是 地 图 ， 束 必须 有 诸如 方向 、 等 高 线 和 比例 尺 之 类 的 图 例 。 要 想 
看 复 和 使 用 地 图 ， 束 必须 知道 这 些 图 例 的 含义 和 用 途 ， 这 个 道理 同样 
适用 于 DOM。 要 想 从 DOM 获 得 信息 ， 必 须 先 把 各 种 表示 和 描述 文档 
的 “图 例 ” 弄 明日 。 


DOM 把 一 份 文档 表示 为 一 棵 树 (这 里 所 说 的 “ 树 ” 是 数学 意义 上 的 概 
念 ) ， 这 是 我 们 理解 和 运用 这 一 模型 的 关键 。 更 具体 地 说 ，DOM 把 文 
档 表 示 为 一 哥 家 谱 树 。 


家 谱 树 本 映 叉 是 一 种 模型 。 家 谱 树 的 典型 用 法 是 表示 一 个 人 类 家 族 的 
谱系 ， 并 使 用 parent ( 父 ) 、child ( 子 ) 、sibling 《兄弟 ) 等 记号 来 表 
明 家 族 成 员 之 间 的 天 系 。 家 谱 树 可 以 把 一 些 相 当 复 杂 的 天 系 人 简明 地 表 
示 出 来 : 一 位 特定 的 家 族 成 员 既 是 某 些 成 员 的 父 蕴 ， 义 是 男 一 位 成 员 
的 子 磋 ， 同 时 还 是 另 一 位 成 员 的 兄弟 。 


家 谱 树 模型 非常 适合 用 来 表示 一 份 用 (X)HTML 语 言 编写 出 来 的 文档 。 
请 看 图 3-1 中 这 份 非常 基本 的 网 页 ， 它 的 内 容 是 一 份 购物 清单 。 


What to buy 


Dont forzet to buy this stuff. 


s A tn of beans 
® Cheese 
® Milk 


Done 
图 3-1 


<1DOCTYPE htm]> 
<htm]l lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Shopping list</title> 
</head> 
<body> 
<hi>what to buy</h1> 
<p title="a gentle reminder">Don't forget to buy this stuff. 
</p> 
<ul id="purchases"> 
<]i>A tin of beans</1i> 
<1i class="sale">Cheese</1i> 
<]1 class="sale important">Milk</1i> 
</U]> 
</body> 
</html> 


这 份 文档 可 以 用 图 3-2 中 的 模型 来 表示 。 


html 
head body 
meta title hi1 p ul 


图 3-2 


现在 我 们 来 分 析 一 下 这 个 网 页 的 结构 ， 了 解 它 的 构成 ， 看 看 它 为 什么 
那么 适合 用 前 面 提 到 的 模型 表示 。DOCTYPE 之 后 ， 一 个 打开 了 的 
<html> 标签 标识 整个 文档 的 开始 ， 这 个 网 页 里 的 所 有 其 他 元 素 都 包含 
在 这 个 元 素 里 ， 这 表示 它 至 少 是 一 个 父亲 ( parent) 。 又 因为 所 有 其 他 
的 元 素 都 包含 在 其 内 部 ， 所 以 这 个 <html> 标签 既 没 有 父亲 ， 也 没有 兄 
第 。 如 采 这 是 一 株 真 正 的 树 ， 这 个 <htm1> 标签 殉 是 树 根 。 

根 元 素 是 htm1L 。 不 管 从 哪个 角度 看 ，html 都 代表 整个 文档 。 

接 下 来 深入 一 层 ， 我 们 发 现 有 <head> 和 <body> 两 个 分 支 。 它 们 位 于 
同一 层次 且 互 不 包含 ， 所 以 它们 是 兄 第 关系 。 它 们 有 痢 共 同 的 父 元 系 

， 但 又 各 有 各 的 子 元 素 ， 所 以 它们 本 映 色 是 其 他 一 些 元 素 的 父 
元 素 。 


<head> 元 素 有 两 个 子 元 素 : <meta> 和 <title> (这 两 个 元 素 是 兄 
弟 关 系 ) 。<body> 元 素 有 三 个 子 元 素 : <h1> 、<p> 和 <ul> (这 三 


个 元 素 是 兄弟 关系 ) 。 继 续 深入 下 去 ， 我 们 发 现 <ul> 也 是 一 个 父 元 
素 ， 它 有 三 个 子 元 素 ， 它 们 都 症 <1i> 元 素 ， 有 一 些 class 属性 。 


利用 这 种 简单 的 家 谱 关 系 记号 ， 我 们 可 以 把 各 元 素 之 间 的 关系 简明 清 
晰 地 表达 出 来 。 例 如 ，<h1> 和 <ul> 之 间 是 什么 关系 ? 答案 是 它们 是 
兄弟 关系 。 那 么 <body> 和 <ul> 之 间 又 是 什么 关系 ? <body> 是 <ul> 
的 父 元 素 ，<u1> 是 <body> 的 一 个 子 元 素 。 


如 采 你 能 把 一 个 文档 的 各 种 元 素 想象 成 一 棵 家 谱 树 ， 我 们 束 可 以 用 同 


样 的 术语 搞 述 DOM。 不 过 ， 与 使 用 "家 谱 树 ”这 个 术语 相 比 ， 把 文档 称 
为 “ 帮 点 树 ” 更 准确 。 


3.4 节点 


节点 (node ) 这 个 词 是 个 网 络 术 语 ， 它 表示 网 络 中 的 一 个 连接 点 。 
一 个 网 络 束 是 由 一 些 广 点 构成 的 集合 。 


在 现实 世界 里 ， 一 切 事 物 都 由 原子 构成 原子 是 现实 世界 的 万 点 。 但 
原子 本 身 还 可 以 进一步 分 解 为 更 细小 的 亚 原子 微粒 。 这 些 亚 原子 微粒 
同样 也 被 当成 是 广 上 后 。 


DOM 也 是 同样 的 情况 。 文 档 是 由 节 扣 构成 的 集合 ， 只 不 过 此 时 的 市 护 
苹 文 档 树 上 的 树 校 和 树叶 而 已 。 


在 DOM 里 有 许多 不 同类 型 的 节点 。 束 像 原 子 包含 者 亚 原 子 微粒 那样 ， 
也 有 很 多 类 型 的 DOM 市 点 包含 着 其 他 类 型 的 节点 。 接 下 来 我 们 先 看 看 
其 中 的 三 种 : 元素 市 态 、 文 本 太 扣 和 属性 太太 。 


3.4.1 元素 节点 
DOM 的 原子 是 元 素 节点 (element node) 。 
在 描述 刚才 那 份 “购物 清单 ”文档 时 ， 我 们 使 用 了 诸如 <body> 、<p> 和 


<ul> 之 类 的 元 素 。 如 果 把 Web 上 的 文档 比 做 一 座 大 厦 ， 元 素 就 是 建造 
这 座 大 厦 的 砖 块 ， 这 些 元 系 在 文档 中 的 布局 形成 了 文档 的 结构 。 


标签 的 名 字 束 是 元 素 的 名 字 。 文 本 段落 元 素 的 名 字 是 “p ”， 无 序 清单 元 
素 的 名 字 古 “ul1”， 列 表 项 元 素 的 名 字 古 “li”。 


元 素 可 以 包含 其 他 的 元 素 。 在 我 们 的 “购物 清单 文档 里 ， 所 有 的 列表 
项 元 素 都 包含 在 一 个 无 序 清单 元 素 的 内 部 。 事 实 上 ， 没 有 被 包含 在 其 
他 元 素 里 的 唯一 元 素 是 <html> 元 素 ， 它 是 我 们 的 节点 树 的 根 元 素 。 


3.4.2 ”文本 节点 


元 素 世 点 只 是 世 点 类 型 的 一 种 。 如 果 一 份 文档 完全 由 一 些 空白 元 素 构 
成 ， 它 将 有 一 个 结构 ， 但 这 份 文档 本 里 将 不 会 包含 什么 内 容 。 在 内 容 
为 王 的 互联 网 上 ， 绝 大 多 数 内 容 部 是 由 文本 提供 的 。 


在 “购物 清单 ”例子 里 ，<p> 元 素 包 含 着 文本 “Don't forget to buy this 
stuff.”。 它 是 一 个 文本 节点 (text node) 。 


在 XHTML 文档 里 ， 文 本 节点 总 是 被 包含 在 元 素 世 点 的 内 部 。 但 并 非 所 
有 的 元 素 玉 点 都 包含 有 文本 节点 。 在 “购物 清单 "文档 里 ，<uU1> 元 素 没 
有 直接 包含 任何 文本 节点 ， 它 包含 着 其 他 的 元 素 节 点 (一 些 <1i> 元 
素 ) ， 后 者 包含 着 文本 节点 。 


3.4.3 ”属性 节点 


属性 结 点 用 来 对 元 到 做 出 更 具体 的 插 述 。 例 如 ， 几 乎 所 有 的 元 素 都 有 
一 个 title 属性 ， 而 我 们 可 以 利用 这 个 属性 对 包含 在 元 系 里 的 东西 做 
出 准确 的 插 述 : 


<p title="a gentle reminder">Don't forget to buy this stuff.</p> 


在 DOM 中 ，title="a gentle reminder" 是 一 个 属性 节点 
(attribute node) ， 如 图 3-3 所 示 。 因 为 属性 总 是 被 放 在 起 始 标 签 里 ， 所 

以 属性 节点 总 是 被 包含 在 元 素 节 点 中 。 并 非 所 有 的 元 素 都 包含 着 属 

性 ， 但 所 有 的 属性 都 被 元 素 包 含 。 


element node 


P 
title = 
0 Don't forget to 
a gentle 。 
Pap buy this stuff. 
attribute node text node 


图 3-3 


在 前 面 的 “购物 清单 * 示 例文 档 里 ， 可 以 清楚 地 看 到 那个 无 序 清单 元 素 
(<ul> ) 有 个 id 属性 。 有 些 清单 元 素 (<1i> ) 有 class 属性 。 如 
果 曾 经 用 过 CSS， 你 对 id 和 class 之 类 的 属性 应 该 不 会 感到 陌生 。 不 
过 ， 为 了 照顾 那些 对 CSS 还 不 太 熟 悉 的 读者 ， 我 们 下 面 将 答 要 地 重 温 几 

个 最 基本 的 CSS 概 念 。 


3.4.4 CSS 


DOM 并 不 是 与 网 页 结构 打交道 的 唯一 技术 。 我 们 还 可 以 通过 CSS ( 层 

车 样式 表 ) 告诉 浏 砚 硕 应 该 如 何 显示 一 份 文 档 的 内 容 。 

类 似 JavaScript 脚 本 ， 对 样式 的 声明 既 可 以 骸 在 文档 的 <head> 部 分 
(<style> 标签 之 间 ) ， 也 可 以 放 在 另外 一 个 样式 表 文 件 里 (参见 第 

4 章 ) 。CSS 声 明 元 素 样式 的 语法 与 JavaScript 函 数 的 定义 语法 很 相似 : 


selector { 


property: Value 
} 


在 样式 声明 里 ， 我 们 可 以 定义 浏 席 亏 在 显示 元 聚 时 使 用 的 颜色 、 字 体 
和 时 二 则 下 所 环 ， 


{ 
color: yellow; 
font-family: "arial", sans-serif; 


font-size: 1.2em; 


} 


继承 (inheritance) 是 CSS 技 术 中 的 一 项 强大 功能 。 类 似 于 DOM，CSS 
也 把 文档 的 内 容 视 为 一 棵 节点 树 。 闻 点 树 上 的 各 个 元 素 将 继承 其 父 元 
素 的 样式 属性 。 


例如 ， 如 果 我 们 为 body 元 素 定 义 了 一 些 颜色 或 子 体 ， 包 含 在 body 元 
素 里 的 所 有 元 取 痢 将 目 动 获得 那些 样式 : 


body { 
color: white; 


background-color: black; 


这 些 颜色 将 不 仅 作 用 于 那些 直接 包含 在 <body> 标签 里 的 内 容 ， 还 将 作 
用 于 藤 套 在 body 元 素 内 部 的 所 有 元 素 。 


图 3-4 古 把 刚才 定义 的 样式 应 用 在 “购物 清早 "示例 文档 上 后 得 到 的 网 页 


显示 效果 。 


What to buy 


Don't forget to buy this stuff. 


。 A tin of beans 
e Cheese 
e Milk 


Done 
图 3-4 
在 某 些 场合 ， 当 把 样式 应 用 于 一 份 文档 时 ， 我 们 其 实 只 想 让 那些 样式 
作用 于 某 个 特定 的 元 素 。 例 如 ， 我 们 只 想 让 茶 一 段 文 本 变 成 菏 种 特殊 
的 颜色 和 字体 ， 但 不 想 让 其 他 段落 受到 影响 。 为 了 获得 如 此 精细 的 控 
en 
站 已 \ 


为 了 把 某 一 个 或 东 儿 个 元 素 与 其 他 元 素 区 别 开 来 ， 需 要 使 用 class 属 
性 或 id 属性 。 


01. class 属性 
你 可 以 在 所 有 的 元 素 上 任意 应 用 class 属性 : 


<p class="special">This paragraph has the special class</p> 


<h2 class="special">So does this headline</h2> 


在 样式 表 里 ， 可 以 像 下 面 这 样 为 class 属性 值 相同 的 所 有 元 素 定 
义 同一 种 样式 : 


,Special 
font-style: italic; 


} 


还 可 以 像 下 面 这 样 利用 class 属性 为 一 种 特定 类 型 的 元 素 定 义 一 
种 特定 的 样式 : 


h2.special { 
text-transform: uppercase; 


02. id 属性 


id 属性 的 用 途 是 给 网 页 里 的 某 个 元 于 加 上 一 个 独一无二 的 标识 
位 5 2 下 而 二 ， 


<U] id="purchases"> 


在 样式 表 里 ， 可 以 像 下 面 这 样 为 有 特定 id 属性 值 的 元 素 定 义 一 种 
独 至 的 样式 : 


#purchases { 


border: 1px solid white; 
background-color: #333; 
color: #ccc; 
padding: 1em; 


尽管 id 本 吴 只 能 使 用 一 次 ， 样 式 表 还 是 可 以 利用 id 属性 为 包含 
在 该 特定 元 素 里 的 其 他 元 聂 定义 样式 。 


#purchases 1i { 
font-weight: bold; 


} 


图 3-5 是 把 刚才 利用 id 属性 定义 的 样式 应 用 在 “购物 清单 ”示例 文档 
上 而 得 到 的 网 页 显示 效果 。 


AAA ~ 


What to buy 


Don'tforgetto buy this stuff. 


图 3-5 
id 属性 就 像 是 一 个 挂钩 ， 它 一 头 连 着 文档 里 的 某 个 元 素 ， 另 一 头 


连 着 CSS 样 式 表 里 的 某 个 样式 。 DOM 也 可 以 使 用 这 种 挂钩 。 
3.4.5 “获取 元 素 


有 3 种 DOM 方 法 可 获取 元 素 节 上 点， 分 别 是 通过 元 素 ID、 通 过 标签 名 字 
和 通过 类 名 字 来 获取 。 


01. getElementById 


DOM 提 供 了 一 个 名 为 getELementById 的 方法 ， 这 个 方法 将 返 
回 一 个 与 那个 有 着 给 定 id 属性 值 的 元 素 节 点 对 应 的 对 象 。 请 注 
意 ，JavaScript 语 言 区 分 字母 大 小 写 ， 所 以 在 写 

出 “getElementById” 时 千 万 不 要 把 大 小 写 弄 错 了 。 如 采 把 它 错 写 
成 “GetElementById” 或 “getElementbyid”， 你 都 得 不 到 正确 的 结果 。 


它 是 document 对 象 竺 有 的 函数 。 在 脚本 代码 里 ， 函 数 名 的 后 面 
必须 跟 有 一 对 圆 括号 ， 这 对 圆 括号 包含 着 函数 的 参数 。 
getElementById 方法 只 有 一 个 参数 : 你 想 获得 的 那个 元 素 的 id 
属性 的 值 ， 这 个 id 值 必 须 放 在 单 引号 或 双 引 号 里 。 


document .getElementById(id) 


下 面 是 一 个 例子 : 


document .getElementById("purchases") 


这 个 调用 将 返回 一 个 对 象 ， 这 个 对 象 对 应 着 document 对 象 里 的 
一 个 独一无二 的 元 素 ， 那 个 元 素 的 HTML id 属性 值 是 
purchases 。 你 可 以 用 typeof 操作 符 来 验证 这 一 点 。typeof 
操作 符 可 以 告诉 我 们 它 的 操作 数 是 一 个 字符 串 、 数 值 、 函 数 、 布 
尔 值 还 是 对 象 。 


下 面 是 把 一 些 JavaScript 语 句 插 入 到 前 面 给 出 的 “购物 清单 ”文档 之 
后 得 到 的 一 份 代码 清单 ， 新 增 的 代码 (黑体 字 部 分 ) 出 现在 
</body> 结束 标签 之 前 。 顺便 说 一 名 ， 我 本 人 并 不 赞成 把 
JavaScript 代 码 直 接骨 入 文档 ， 但 这 确实 是 一 种 简便 快捷 的 测试 手 


段 : 


<!IDOCTYPE html> 
<htm]l lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Shopping list</title> 
</head> 


<body> 
<hi>what to buy</h1> 


<p title="a gentle reminder">Don't forget to buy this 
stuff.</p> 


<ul id="purchases"> 
<]i>A tin of beans</1i> 
<]i class="sale">Cheese</1i> 


<1i class="sale important">Milk</1i> 
</ul> 


<script> 


alert(typeof document .getElementById("purchases")); 
</script> 


</body> 
</html> 


把 上 面 这 些 代 码 保存 为 一 个 XHTML 文 件 。 当 在 Web 浏 览 器 里 加 载 
这 个 XHTML 文 件 ， 会 弹出 一 个 如 图 3-6 所 示 的 alert 对 话 框 ， 它 
向 你 们 报告 document .getElementById ("purchases") 的 
类 型 一 一 它 是 一 个 对 象 。 


; v » 
(3 object 


Done 


图 3-6 
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事实 上 ， 文 档 中 的 每 一 个 元 素 都 是 一 个 对 象 。 利用 DOM 提 供 的 方 
法 能 得 到 任何 一 个 对 象 。 一 般 来 说 ， 用 不 着 为 文档 里 的 每 一 个 元 
素 都 定义 一 个 独一无二 的 id 值 ， 那 也 太 小 题 大 做 了 。DOM 提 供 了 
另 一 个 方法 来 获取 那些 没有 id 属性 的 对 象 。 


.getElementsByTagName 


getElementsByTagName 方法 返回 一 个 对 象 数 组 ， 每 个 对 象 分 
别 对 应 着 文档 里 有 着 给 定 标签 的 一 个 元 素 。 类 似 于 
getElementById ， 这 个 方法 也 是 只 有 一 个 参数 的 函数 ， 它 的 参 
数 是 标签 的 名 字 : 


element.getElementsByTagName (tag) 


它 与 getElementById 方法 有 许多 相似 之 处 ， 但 它 返 回 的 是 一 个 
数组 ， 你 在 编写 脚本 时 于 万 注意 不 要 把 这 两 个 方法 弄 混 了 。 


下 面 是 一 个 例子 : 


document .getElementsByTagName("1i") 


这 个 调用 将 返回 一 个 对 象 数 组 ， 每 个 对 象 分 别 对 应 着 document 
对 象 中 的 一 个 列表 项 元 素 。 与 任何 其 他 的 数组 一 样 ， 我 们 可 以 利 
用 length 属性 碍 出 这 个 数组 里 的 元 素 个 数 。 


首先 ， 在 上 一 小 节 给 出 的 XHTML 示例 文档 里 把 <scrIpt> 标签 中 
的 alert 语句 符 换 为 下 面 这 条 语句 : 


alert(document ,getEJLementSByYTagName("11"). length ) ， 


你 会 看 到 这 份 示例 文档 里 的 列表 项 元 素 的 个 数 : 3。 这 个 数组 里 的 
每 个 元 素 都 是 一 个 对 象 。 可 以 通过 利用 一 个 循环 语句 和 typeof 操 


作 符 去 遍历 这 个 数组 来 验证 这 一 点 。 例 如 ， 你 可 以 试 试 下 面 这 个 
for 循环 : 


for (var i=0; i < document.getElementsByTagName("1i").1length,; 
i++) { 


alert(typeof document.getElementsByTagName("1i")[i]); 


请 注意 ， 即 使 在 整个 文档 里 这 个 标签 只 有 一 个 元 素 ， 
getElementsByTagName 也 返回 一 个 数组 。 此 时 ， 那 个 数组 的 
长 度 是 1。 


你 或 许 已 经 开始 觉得 用 键盘 反复 裔 入 

document .getElementsByTagName ("1i") 是 件 很 麻烦 的 事 
情 ， 而 这 些 长 长 的 字符 串 会 让 代码 变 得 越 来 越 难以 阅读 。 有 个 简 
单 的 办 法 可 以 减少 不 必要 的 打字 量 并 改善 代码 的 可 读 性 : 只 要 把 
document .getElementsByTagName ("1i") 赋值 给 一 个 变量 
即 可 。 


请 把 <script> 标签 中 的 alert 语句 替换 为 下 面 这 些 语句 : 


var items = document.getElementsByTagName("11i"); 
for (var i=0; i < items.length; i++) { 


alert(typeof items[i]); 


现在 ， 你 将 看 到 三 个 alert 对 话 框 ， 显 示 的 消 恩 都 是 “object”。 


getElementsByTagName 允许 把 一 个 通配符 作为 它 的 参数 ， 而 
这 意味 着 文档 里 的 每 个 元 素 都 将 在 这 个 函数 所 返回 的 数组 里 占有 
一 席 之 地 。 通 配 符 〈 星 号 字符 “* ”) 必须 放 在 引号 里 ， 这 是 为 了 让 
通配符 与 乘法 操作 符 有 所 区 别 。 如 采 你 想 知 道 某 份 文 档 里 总 共有 
多 少 个 元 素 市 点 ， 像 下 面 这 样 使 用 通配符 即 可 : 


alert(document.getElementsByTagName("*").1length); 


03. 


还 可 以 把 getElementById 和 getElementsByTagName 结合 
起 来 运用 。 例 如 ， 刚 才 给 出 的 几 个 例子 都 是 通过 document 对 象 
调用 getElementsByTagName 的 ， 如 果 只 想 知道 id 属性 值 是 
purchase 的 元 素 包 含 着 多 少 个 列表 项 ， 必 须 通 过 一 个 更 具体 的 
对 象 去 调用 这 个 方法 ， 如 下 所 示 : 


var Shopping = document.getElementById("purchases"); 


var items = shopping.getElementsByTagName("*"); 


在 这 两 条 语句 执行 完毕 后 ，items 数组 将 只 包含 id 属性 值 是 
purchase 的 无 序 清单 里 的 元 素 。 具 体 到 这 个 例子 ，items 数组 
的 长 度 刚 好 与 这 份 文档 里 的 列表 项 元 素 的 总 数 相 等 : 


alert (items.length); 


如 有 果 还 需要 更 多 的 证 据 ， 下 面 这 些 语句 将 证 明 items 数组 里 的 每 
个 值 确 实 是 一 个 对 象 : 


for (var i=0; i < items.length; I++) { 


alert(typeof items[i]); 


getElementsByClassName 


HTML5 DOM (http://www.whatwg.org/specs/web-apps/current-work/ 
) 中 新 增 了 一 个 令 人 期 待 已 久 的 方法 : 
getElementsByClassName 。 这 个 方法 让 我 们 能 够 通过 class 
属性 中 的 类 名 来 访问 元 素 。 不 过 ， 由 于 这 个 方法 还 比较 新 ， 某 些 
DOM 实 现 里 可 能 还 没有 ， 因 此 在 使 用 的 时 候 要 当心 。 下 面 我们 先 
vam 然后 再 讨论 怎么 可 徘 地 使 用 
硫 亡 尖 


与 getElementsByTagName 方法 类 似 ， 
getElementsByClassName 也 只 接受 一 个 参数 ， 就 是 类 名 : 


getElementsByClassName(class) 


这 个 方法 的 返回 值 也 与 getElementsByTagName 类 似 ， 都 是 一 
个 具有 相同 类 名 的 元 素 的 数组 。 下 面 这 行 代码 返回 的 就 是 一 个 数 
组 ， 其 中 包含 类 名 为 "sale" 的 所 有 元 素 : 


document .getElementsByClassName("sale") 


使 用 这 个 方法 还 可 以 碍 找 那些 带 有 多 个 类 名 的 元 素 。 要 指定 多 个 
类 名 ， 只 要 在 字符 串 参 数 中 用 空格 分 隔 类 名 即 可 。 例 如 ， 在 
<Script> 标签 中 添加 下 面 这 行 alert 代码 : 


alert(document.getElementsByClassName("important 


sale").length); 


你 会 看 到 警告 框 中 显示 1， 表 示 只 有 一 个 元 素 匹 配 ， 因 为 只 有 一 个 
元 素 同 时 带 有 "important" 和 "sale" 类 名 。 注 意 ， 即 使 在 元 素 
的 class 属性 中 ， 类 名 的 顺序 是 "sale important" 而 非 参 数 

中 指定 的 "important sale" ， 也 照样 会 死 配 该 元 素 。 不 仅 类 名 
的 实际 顺序 不 重要 ， 束 算 元 素 还 带 有 更 多 类 名 也 没有 关系 。 


与 使 用 getElementsByTagName 一 样 ， 也 可 以 组 合 使 用 
getElementsByClassName 和 getElLlementById 。 如 果 你 想 
知道 在 id 为 "purchases" 的 元 素 中 有 多 少 类 名 包含 "sale" 列 
表 项 ， 可 以 先 找到 那个 特定 的 对 象 ， 然 后 再 调用 
getElementsByClassName:: 


var Shopping = document.getElementById("purchases"); 


var sales = shopping.getElementsByClassName("sale"); 


这 样 ，sales 数组 中 包含 的 就 只 是 位 于 "purchases" 列表 中 的 
带 有 "sale" 类 的 元 素 。 运 行 下 面 这 行 代码 ， 职 会 看 到 sales 数 


组 中 包含 两 项 : 


alert (sales.length); 


这 个 getElementsByClassName 方法 非常 有 用 ,但 只 有 较 新 的 
浏览 器 才 支 持 它 。 为 了 弥补 这 一 不 足 ，DOM 脚 本 程序 员 需 要 使 用 
已 有 的 DOM 方 法 来 实现 自己 的 getElementsByClassName ， 有 
点 像 是 成 人 礼 似 的 。 而 多 数 情 况 下 ， 他 们 的 实现 过 程 都 与 下 面 这 
个 getElementsByClassName 大 致 相似 ， 这 个 函数 能 适用 于 新 
老 浏览 右 : 


function getElementsByClassName(node, classname) { 
if (node.getElementsByClassName) { 

// 使 用 现 有 方法 
return node.getElementsByClassName(classname); 
else { 
var results = new Array(); 
var elems = node.getElementsByTagName("*"); 
for (var i=0; i<elems.length; i++) { 


if (elems[i].className.indexof(classname) != -1) { 
results[results.1length] = elems[i]; 


return results; 


这 个 getElementsByClassName 函数 接受 两 个 参数 。 第 一 个 
node 表 示 DOM 树 中 的 搜索 起 点 ， 第 二 个 classname 就 是 要 搜索 
的 类 名 了 。 如 果 传 入 节点 上 已 经 存在 了 适当 的 
getElementsByClassName 函数 ， 那 么 这 个 新 函数 就 直接 返回 
相应 的 节点 列表 。 如 果 getElementsByClassName 函数 不 存 
在 ， 这 个 新 玉 数 束 会 循环 遍历 所 有 标签 ， 查 找 带 有 相应 类 名 的 元 
素 。 (这 个 例子 不 适用 于 多 个 类 名 。) 如 果 使 用 这 个 函数 来 模拟 
前 面 取得 购物 列表 的 操作 ， 就 可 以 这 样 写 : 


var Shopping = document.getElementById("purchases"); 


var Sales = getElementsByClassName(shopping, "sale"); 


当然 ， 搜 索 匹 配 的 DOM 元 素 的 方法 有 很 多 ， 但 真正 高 效 的 却 不 
多 ， 有 兴趣 的 读者 可 以 参考 Robert Nyman 的 文章 The Ultimate 
getElementsByClassName (http://robertnyman.com/2008/05/27/the- 
ultimate-getelementsbyclassname-anno-2008 ) 。 


第 5 章 将 继续 讨论 类 似 的 文 持 性 问题 ， 以 及 如 何 解 决 这 些 问题 。 第 
7 章 将 更 详细 地 探讨 DOM 操 作 方 法 。 


3.4.6” 夫 点 知识 点 


你 一 定 已 经 厌倦 了 看 那么 多 明显 示 看 单词 “object" 的 alert 对 话 框 。 你 
一 定 已 经 明日 : 文档 中 的 每 个 元 素 世 点 都 是 一 个 对 象 。 不 仅 如 此 ， 这 
些 对 象 中 的 每 一 个 还 天 生 具 有 一 系列 非常 有 用 的 方法 ， 这 要 归功 于 
DOM。 利 用 这 些 预 完 定义 好 的 方法 ， 我 们 不 仅 可 以 检索 出 文档 里 任何 
一 个 对 象 的 信息 ， 甚 至 还 可 以 改变 元 素 的 属性 。 


下 面 是 对 本 章 此 前 学 习 内 容 的 一 个 简要 总 结 。 


。 一 份 文档 就 是 一 棵 六 点 树 。 

廊 扩 分 为 不 同 的 类 型 元素 广 点 、 属 性 节点 和 文本 方 点 等 。 

getElementById 将 返回 一 个 对 象 ， 该 对 象 对 应 着 文档 里 的 一 个 

特定 的 元 素 季 点。 

。getElementsByTagName 和 getElementsByClassName 将 返 
回 一 个 对 象 数 组 ， 它 们 分 别 对 应 着 文档 里 的 一 组 特定 的 元 素 广 


。 每 个 节点 都 是 一 个 对 象 。 
接 下 来 介绍 节点 对 象 的 属性 和 方法 。 
3.5 “获取 和 设置 属性 
至 此 ， 我 们 已 经 介绍 了 3 种 获取 特定 元 素 的 方法 ， 分 别 是 


getElementById , getElementsByTagName 和 
getElementsByClassName 。 得 到 需要 的 元 素 以 后 ， 我 们 就 可 以 设 


法 获取 它 的 各 个 属性 。getAttribute 方法 就 是 用 来 做 这 件 事 的 。 相 
应 地 ，setAttribute 方法 则 可 以 更 改 属 性 和 点 的 值 。 


3.5.1 getAttribute 


getAttribute 是 一 个 函数 。 它 只 有 一 个 参数 一 你 打算 查询 的 属性 
的 名 字 : 


object getAttribute(attribute ) 


与 此 前 我 们 介绍 过 的 那些 方法 不 同 ，getAttribute 方法 不 属于 
document 对 象 ， 所 以 不 能 通过 document 对 象 调用 。 它 只 能 通过 元 
素 节 点 对 象 调用 。 例 如 ， 可 以 与 getElementsByTagName 方法 合 
用 ， 获 取 每 个 <p> 元 素 的 title 属性 ， 如 下 所 示 : 


var paras = document.getElementsByTagName("p"); 
for (var i=0; i < paras.length; i++ ) 


alert(paras[i].getAttribute("title")); 


把 上 面 这 段 代 码 放 到 前 面 给 出 的 “购物 清单 ”文件 的 末尾 ， 然 后 在 Web 浏 
贤 器 里 重 靳 加 载 这 个 页 面 ， 屏 幕 上 将 弹出 一 个 显示 着 文本 消 妃 “<a gentle 
reminder" 的 alert 对 话 框 。 

在 “购物 清单 "文件 里 只 有 一 个 <p> 元 素 ， 并 且 它 有 title 属性 。 假 如 
这 份 文 档 有 更 多 个 <p> 元 素 ， 并 且 它 们 没有 title 属性 ， 则 
getAttribute("title") 方法 会 返回 null 值 。 在 JavaScript 里 ， 
null 的 含义 是 “没有 值 *。 把 下 面 代 码 添 加 a 到 “购物 清单 ”文件 中 的 现 有 


标签 之 后 : 


<p>This is just a test</p> 


重新 加 载 这 个 页 面 。 这 一 次 ， 你 将 看 到 两 个 alert 对 话 框 ， 而 第 二 个 
对 话 框 将 是 一 片 空白 或 者 是 只 显示 着 单词 “mul”， 这 取决 于 你 使 用 是 哪 
种 Web 浏 览 右 。 

我 们 可 以 修改 脚本 ， 让 它 只 在 title 属性 有 值 时 才 弹 出 消息 。 我 们 将 
增加 一 条 if 语句 来 检查 getAttribute 的 返回 值 是 不 是 null 。 趁 着 
这 个 机 会 ， 我 们 顺便 增加 几 个 变量 以 提高 脚本 的 可 读 性 。 


var paras = document.getElementsByTagName("p"); 
for (var i=0; i< paras.length; I++) { 
Var title text = paras[i].getAttribute("title"); 
if (title text != null) { 


alert(title text); 


现在 重新 加 载 这 个 页 面 ， 你 会 看 到 一 个 显示 着 “a gentle reminder” 消 息 的 
alert 对 话 框 ， 如 图 3-7 所 示 。 


a gentle reminder 


CC—ex— 


Done 


图 3-7 


我 们 甚至 可 以 把 这 段 代码 缩 得 更 短 一 些 。 当 检查 某 项 数据 是 否 是 null 
值 时 ， 我 们 其 实 是 在 检查 它 是 否 存在 。 这 种 检查 可 以 简化 为 直接 把 被 
检查 的 数据 用 作 if 语句 的 条 件 。if (something) 与 if 
(something != null) 完全 等 价 ， 但 前 者 显然 更 为 简明 。 此 时 ， 如 
果 something 存在 ， 则 if 语句 的 条 条 件 将 为 真 ， 如 果 something 不 存 
在 ， 则 if 语句 的 条 件 将 为 假 。 


具体 到 这 个 例子 ， 只 要 我 们 把 if (title_text != nul1l) 替换 为 

if (title_text) ， 我 们 就 可 以 得 到 更 简明 的 代码 。 此 外 ， 为 了 进 
一 步 增加 代码 的 可 读 性 ， 我 们 还 可 以 趁 此 机 会 把 alert 语句 与 if 语句 
写 在 同一 行 上 ， 这 可 以 让 它们 更 接近 于 我 们 日 常生 活 中 的 英语 句子 : 


var paras = document.getElementsByTagName("p"); 
for (var i=0; i< paras.length; i++) { 
var title text = paras[i].getAttribute("title"); 


If (title text) alert(title text); 


3.5.2 SetAttribute 


此 前 介绍 的 所 有 方法 都 是 用 来 获取 信息 。setAttribute() 有 点 不 
同 : 它 人 允许 我 们 对 属性 节点 的 值 做 出 修改 。 与 getAttribute 一 样 ， 
setAttribute 也 只 能 用 于 元 素 节 点 : 


object.setAttribute(attribute,value) 


在 下 面 的 例子 里 ， 第 一 条 语句 得 到 id 是 purchase 的 元 素 ， 第 二 条 语 


句 把 这 个 元 素 的 title 属性 值 设 置 为 a list of goods : 


var shopping = document.getElementById("purchases"); 


shopping.setAttribute("title","a list of goods"); 


我 们 可 以 利用 getAttribute 来 证 明 这 个 元 隶 的 title 属性 值 确实 发 
和 


var shopping = document.getElementById("purchases"); 
alert(shopping.getAttribute("title")); 
shopping.setAttribute("title","a list of goods"); 
alert(shopping.getAttribute("title")); 


加 载 页 面 后 将 弹出 两 个 alert 对 话 框 ， 第 一 个 alert 对 话 框 出 现在 
setAttribute 被 调用 之 前 ， 它 将 是 一 片 空白 或 显示 单词 “null”*， 第 
二 个 出 现在 设置 title 属性 值 之 后 ， 它 将 显示 “a list of goods” 消 轧 。 


在 上 例 中 ， 我 们 设置 了 一 个 节点 的 title 属性 ， 这 个 属性 原先 并 不 存 
在 。 这 表明 setAttribute 实际 完成 了 两 项 操作 : 先 创建 这 个 属性 ， 
然后 设置 它 的 值 。 如 果 setAttribute 用 在 一 个 本 身 就 有 这 个 属性 的 
元 素 节 点 上 ， 这 个 属性 的 值 束 会 被 履 盖 掉 。 


在 “购物 清单 示例 文档 里 ，<p> 元 素 已 经 有 了 一 个 title 属性 ， 这 个 
属性 的 值 是 a gentle reminder 。 可 以 用 setAttribute 来 改变 
它 的 值 : 


var paras = document.getElementsByTagName("p"); 
for (var i=0; i< paras.length; i++) 
Var title text = paras[i].getAttribute("title"); 
if (title text) { 
paras[i].setAttribute("title","brand new title text"); 


alert(paras[i].getAttribute("title")); 


上 面 这 段 代码 将 先 从 文档 里 获取 全 部 带 有 title 属性 的 <p> 元 素 ， 然 
后 把 它们 的 title 属性 值 都 修改 为 brand new title text 。 
对 “购物 清单 "文件 来 说 ， 属 性 值 a gentle reminder 会 被 覆盖 。 


这 里 有 一 个 非常 值得 关注 的 细节 : 通过 setAttribute 对 文档 做 出 修 
改 后 ， 在 通过 浏览 器 的 view source (查看 源 代码 ) 选项 去 查看 文档 的 源 
代码 时 看 到 的 仍 将 是 改变 前 的 属性 值 ， 也 就 是 说 ，setAttribute 做 
出 的 修改 不 会 反映 在 文档 本 身 的 源 代码 里 。 这 种 “ 表 里 不 一 ”的 现象 源 
自 DOM 的 工作 模式 ， 先 加 载 文 档 的 静态 内 容 ， 再 动态 刷新 ， 动 态 刷 新 
不 影响 文档 的 静态 内 容 。 这 正 是 DOM 的 真正 威力 : 对 页 面 内 容 进行 刷 
新 却 不 需要 在 浏览 器 里 刷新 页 面 。 


3.6 小 结 


本 章 介 绍 了 DOM 提 供 的 五 个 方法 : 


。 getElementById 

。 getElementsByTagName 

。 getElementsByClassName 
。 getAttribute 

。 SetAttribute 


这 五 个 方法 是 将 要 编写 的 许多 DOM 脚 本 的 基石 。 


DOM 还 提供 了 许多 其 他 的 属性 和 方法 ， 如 nodeName 、nodeValue 

、childNodes 、nextSibling 和 parentNode 等 ， 这 里 仅 举 这 人 么 
几 个 例子 。 在 后 面 需 要 的 时 候 我 会 详细 介绍 它们 。 我 现在 就 提 到 它们 
主要 是 为 了 吊 吊 大 家 的 胃口 。 


本 章 内 容 偏重 于 理论 。 在 看 过 那么 多 的 alert 对 话 框 之 后 ， 相 信 大 家 
都 迫不及待 地 想 通 过 一 些 其 他 东西 进一步 了 解 和 测试 DOM， 而 我 也 正 
想 通 过 一 个 案例 来 进一步 展示 DOM 的 强大 威力 。 在 下 一 章 中 ， 我 将 带 
领 大 家 利用 本 章 介 绍 的 DOM 方 法 去 创建 一 个 基于 JavaScript 的 图 片 库 。 


第 4 章 ”案例 人 研究: JavaScript 图 
片 库 


本 章 内 容 


编写 一 个 优秀 的 标记 文件 。 

编写 一 个 JavaScript 函 数 以 显示 用 户 想 要 查看 的 图 片 。 
由 标记 触发 函数 调用 。 

使 用 几 个 狐 方法 扩展 这 个 JavaScript 芳 数 。 


现在 ， 是 时 候 让 DOM 去 做 些 事 了 “。 在 这 一 章 中 ， 我 将 带领 大 家 用 
JavaScript 和 DOM 去 建立 一 个 图 片 库 。 


把 图 片 发 布 到 网 上 的 办 法 很 多 。 你 可 以 人 简单 地 把 所 有 的 图 片 都 放 到 一 
个 网 页 里 。 不 过 ， 如 琳 打 算 发 布 的 图 片 比较 多 ， 这 个 页 面 很 快 束 会 很 
快 变 得 过 于 庞大 。 要 知道 ， 虽 然 网 页 标记 代码 没有 多 大 ， 但 加 上 那些 
图 片 后 用 户 要 下 载 的 数据 量 束 相当 可 观 了 。 我 们 必须 面 对 这 样 一 个 现 
实 : 没有 人 愿意 等 竺 很 长 很 长 的 时 间 去 下 载 一 个 网 页 。 


因此 ， 为 每 张 图 片 分 别 创建 一 个 网 页 的 解决 方案 值得 考虑 。 这 样 你 的 
图 斤 库 将 不 再 是 一 个 体积 庞大 、 难 以 下 载 的 网 页 ， 而 变 成 了 许多 个 大 
才 合 理 、 便 于 下 载 和 浏览 的 页 面 。 不 过 ， 这 一 解决 方案 并 非 尽 善 尽 
美 。 首 和 完 ， 为 每 张 图 片 分 别 制作 一 个 网 页 需要 花费 很 多 很 多 的 时 间 ，; 
其 次 ， 每 个 网 页 上 应 该 提供 某 种 导航 链接 来 给 出 当前 图 片 在 整个 图 厂 
库 里 的 位 置 ， 方 便 人 们 从 当前 图 片 转 到 其 他 的 图 片 。 


如 果 想 两 全 其 美 ， 利 用 JavaScript 来 创建 图 片 库 将 是 最 佳 的 选择 ， 把 整 


个 图 片 库 的 浏览 链接 集中 安排 在 图 片 库 主页 里 ， 只 在 用 户 点 击 了 这 个 
主页 里 的 某 个 图 片 链 接 时 才 把 相应 的 图 片 传送 给 他 。 


4.1 标记 


为 了 完成 JavaScript 图 片 库 ， 我 特意 用 数码 相机 拍摄 了 几 张 照片 ， 并 把 
它们 修整 成 最 适合 于 用 浏览 万 来 查看 的 矿 寸 ， 即 400 像 素 宽 x300 像 素 


。 在 你 目 己 做 练习 时 ,大 可 不 必 拘 泥 于 这 个 矿 才 ， 你 可 以 使 用 任何 岁 


第 一 项 工作 是 为 这 些 图 片 创建 一 个 链接 清单 。 因 为 我 没 打 算 让 这 些 图 
片 按 照 特 定 顺 序 排列 ， 所 以 将 使 用 一 个 无 序 清单 元 素 (<ul> ) 来 列 出 
那些 链接 。 如 果 你 自己 的 图 片 已 事先 排 好 序 ， 那 整 最 好 使 用 一 个 有 序 
清单 元 素 (<o1> ) 来 标记 这 些 图 片 链 接 。 


下 面 是 我 的 标记 清单 : 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Image Gallery</title> 
</head> 
<body> 
<h1i>snapshots</h1> 
<ul> 
<1i> 
<a href="images/fireworks.jpg" title="A fireworks display"> 
Fireworks</a> 
</1i> 
<1i> 
<a href="images/coffee.jpg" title="A cup of black coffee"> 
Coffee</a> 
</1i> 
<1i> 
<a href="images/rose.jpg" title="A red, red rose">Rose</a> 
</1i> 
<1i> 
<a href="images/bigben.jpg" title="The famous clock"> Big 
Ben</a> 
</1i> 
</ul> 
</body> 
</html> 


我 将 把 这 些 标记 保存 到 gallery .html 文件 ， 并 把 图 片 集中 保存 在 目 
录 ijmages 里 。 我 的 jmages 目录 和 gallery .html 文件 位 于 同一 个 
目录 下 。 在 gallery .html 文件 里 ， 无 序 清单 元 素 中 的 每 个 链接 分 别 
指向 不 同 的 图 片 。 在 浏览 器 窗口 里 点 击 某 个 链接 就 可 以 转 到 相应 的 图 

厂 ， 但 从 图 片 重新 返回 到 链接 清单 目前 还 必须 借助 于 浏览 器 的 Back 


(后 退 ) 按钮 。 图 4-1 是 这 个 基本 的 链接 清单 在 浏览 器 窗口 里 的 显示 效 
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图 4-1 


这 是 一 个 相当 令 人 满意 的 网 页 ， 但 它 的 默认 行为 还 不 太 理想 。 下 面 是 
我 希望 改进 的 几 个 地 方 。 


。 有 我 布 望 能 留 在 这 个 网 页 而 不 是 转 到 男 一 个 窗 


。 当 点 击 菜 个 链接 时 我 希望 能 在 这 个 网 页 上 同时 看 到 那 张 图 片 以 
及 原 有 的 图 片 清 单 。 
下 面 是 我 为 了 实现 上 述 目标 而 需要 完成 的 几 项 改进 


通过 增加 一 个 占 位 符 " 图 片 的 办 法 法 在 这 个 主页 上 为 图 片 预 留 一 个 
n| 
。 在 点 击 某 个 链接 时 ， 拦 截 这 个 网 页 的 默认 行为 。 


人 


先 来 解决 * 占 位 符 ” 图 片 的 问题 。 我 选用 了 一 个 类 似 于 名 片 的 图 片 ， 你 
避 以 根据 个 人 宫 好 来 决定 选用 的 图 三 ， 即使 选用 一 个 空白 图 片 也 没 问 
是 页 。 


及 全 


把 下 面 这 些 代码 插入 到 图 片 清单 的 末尾 : 


<img id="placeholder" src="images/placeholder.gif" alt="my image 


gallery" /> 


我 对 这 个 图 片 的 id 属性 进行 了 设置 ， 这 将 使 我 可 以 通过 一 个 外 部 的 样 
式 表 对 图 片 的 显示 位 置 和 显示 效 末 加 以 控制 。 例 如 ， 可 以 让 这 个 图 上 厂 

出 现在 链接 清单 的 著 边 而 不 是 它 的 下 方 ， 还 可 以 在 自己 的 JavaScript 代 
| 值 。 下 面 是 这 个 页 面 在 增加 了 “ 占 位 符 ” 图 片 后 的 显示 
从 O 
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图 4-2 
现在 ， 标 记 文 件 已 经 准备 好 了 ， 接 下 来 的 工作 是 编写 JavaScript 代 码 。 


4.2 JavaScript 


为 了 把 * 占 位 符 * 图 片 替换 为 想 要 查看 的 图 片 ， 需 要 改变 它 的 src 属 
性 。setAttribute 是 完成 这 项 工作 的 最 佳 选择 ， 而 我 将 利用 这 个 广 
法 写 一 个 画 数 。 这 个 画 数 只 有 一 个 参数 ， 即 一 个 图 片 链接 。 它 通过 改 
变 “ 占 位 符 ” 图 片 的 src 属性 的 办 法 将 其 蔡 换 为 参数 图 片 。 


首先 ， 需 要 给 函数 起 一 个 好 名 字 ， 它 应 能 描述 这 个 函数 的 用 途 ， 还 要 
简明 抑 要 。 我 决定 把 这 个 函数 命名 为 showPic 。 还 需要 给 这 个 函数 的 
参数 起 一 个 名 字 ， 我 决定 把 它 命名 为 whichpic : 


function showPic(whichpic ) 


whichpic 代表 着 一 个 元 素 节 上 点， 具体 地 说 ， 那 是 一 个 指 回 某 个 图 片 
的 <a> 元 素 。 我 需要 分 解 出 图 片 的 文件 路 径 ， 这 可 以 通过 在 whichpic 
元 素 上 调用 getAttribute 得 到 ， 只 要 把 "href" 作为 参数 传递 给 
getAttribute 就 行 了 : 


whichpic.getAttribute("href") 


我 将 把 这 个 路 径 存 入 变量 source : 


var source = whichpic.getAttribute( "href"); 


接 下 来 ， 还 需要 获取 “ 占 位 符 ” 图 片 ， 这 对 getElementById 来 说 不 过 


是 小 菜 一 碟 : 


document .getElementById("placeholder") 


我 不 想 重 复 裔 入 “document .getElementById("placeholder") 
”这 么 长 的 字符 串 ， 所 以 将 把 这 个 元 素 赋 给 变量 placeholder : 


var placeholder = document.getElementById("placeholder"); 


现在 ， 已 经 声明 并 赋值 了 两 个 变量 : source 和 placeholder 。 它 们 
可 以 让 脚本 简明 易 读 。 


我 将 使 用 setAttribute 对 placeholder 元 素 的 src 属性 进行 刷 
新 。 还 记得 吗 ， 这 个 方法 有 两 个 参数 : 一 个 是 属性 名 ， 另 一 个 是 属性 
的 值 。 具 体 到 这 个 例子 ， 因 为 我 想 对 src 属性 进行 设置 ， 所 以 第 一 个 
参数 是 "src" ; 至 于 第 二 个 参数 ， 也 就 是 src 属性 的 值 ， 我 已 经 把 它 
保存 在 source 变量 里 了 : 


placeholder.setAttribute("src",source); 


这 显然 要 比 下 面 这 么 见长 的 代码 更 容易 阅读 和 理解 : 


document .getElementById("placeholder").setAttribute("src", 


=» whichpic.getAttribute("href")); 


4.2.1 非 DOM 解 决 方案 

其 实 ， 不 使 用 setAttribute 方法 也 可 以 改变 图 片 的 src 属性 。 
setAttribute 方法 是 “第 1 级 DOM”(DOM Level 1) 的 组 成 部 分 ， 它 
可 以 设置 任意 元 素 世 点 的 任意 属性 。 在 “第 1 级 DOM" 出 现 之 前 ， 你 可 以 
和 这 个 办 法 到 现在 仍然 有 

py o 


例如 ， 如 果 想 改变 某 个 input 元 素 的 value 属性 ， 可 以 这 样 : 


element .Value = "the new value" 
element .SetAttribute("Vvalue"，"the new Value") ， 


类 似 的 办 法 也 可 以 用 来 改变 图 片 的 src 属性 。 例 如 ， 在 我 的 图 片 库 脚 
本 里 ， 完 全 可 以 用 下 面 这 条 语句 来 代替 setAttribute : 


placeholder.src = source; 


我 个 人 更 喜欢 使 用 setAttribute“。 起 码 不 必 费 心 去 记忆 哪些 元 素 的 
哪些 属性 可 以 用 DOM 之 前 的 哪些 方法 去 设置 。 虽 然 用 那些 老 办 法 可 以 
上 毫 无 问题 地 对 文档 里 的 图 片 、 表 单 和 其 他 一 些 元 素 的 属性 进行 设置 ， 
但 setAttribute 的 优势 在 于 它 可 以 修改 文档 中 的 任何 一 个 元 素 的 任 
何 一 个 属性 。 


“第 1 级 DOM" 的 另 一 个 优势 是 可 移植 性 更 好 。 那 些 老 方法 只 适用 于 Web 
文档 ， DOM 则 适用 于 任何 一 种 标记 语言 。 虽 然 这 种 差异 对 我 们 这 个 例 
子 没有 影响 ， 但 我 希望 大 家 能 够 牢 牢 记 住 这 一 点 : DOM 有 十 一 种 适用 于 
多 种 环境 和 多 种 程序 设计 语言 的 通用 型 API。 如果 想 把 从 本 书 学 到 的 
DOM 技 巧 运用 在 Web 浏 览 器 以 外 的 应 用 环境 里 ， 严 格 遵 守 “ 第 1 级 
DOM” 能 够 让 你 避免 与 兼容 性 有 关 的 任何 问题 。 


4.2.2 “最终 的 函数 代码 清单 
下 面 是 showPic 函数 完整 的 代码 清单 : 


function ShowPic(whichpic) { 
var Source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 


placeholder.setAttribute("src",source); 


接 下 来 的 任务 是 把 这 个 JavaScript 函 数 与 标记 文档 结合 起 来 。 


4.3 ”应 用 这 个 JavaSscript 函 数 


玉 数 写 完 了 ， 接 下 来 束 要 在 图 片 库 文档 里 使 用 它 。 把 这 个 芳 数 保存 在 
扩展 名 为 .js 的 文本 文件 中 。 在 此 ， 可 以 给 它 起 个 名 字 叫 showPic .js 


若 一 个 站 点 用 到 多 个 JavaScript 文 件 ， 为 了 减少 对 站 点 的 请 求 次 数 

(提高 性 能 ， 应 该 把 这 些 .js 文件 合并 到 一 个 文件 中 。 本 书 为 了 
便于 说 明 问 题 ， 不 少 例子 都 使 用 了 多 个 文件 。 等 到 了 第 5 章 ， 我 们 
会 专门 讨论 这 个 问题 以 及 其 他 提升 站 点 性 能 的 最 佳 实践 。 


束 像 我 刚才 决定 把 所 有 的 图 片 集中 存放 在 jmages 子 目 录 里 那样 ， 把 所 
有 的 JavaScript 脚 本 文件 集中 存放 在 一 个 子 目 录 里 也 是 个 好 主意 。 我 创 
建 了 一 个 名 为 scripts 的 子 目录 并 把 showPic .js 文件 保存 到 其 中 。 


现在 ， 需 要 在 图 片 库 文档 里 插入 一 个 链接 来 引用 这 个 JavaScript 脚 本 文 
件 。 我 将 把 下 面 这 行 插入 到 HTML 文 档 的 </body> 标签 之 前 : 


<script type="text/javascript" src="scripts/showpPic.js"></script> 


这 样 在 图 片 库 文档 里 就 可 以 使 用 showPic 函数 了 。 如 果 到 此 打住 ， 
那么 showPic 函数 永远 也 不 会 被 调用 。 我 们 需要 给 图 片 列表 的 链接 添 
加 行为 ， 也 就 是 事件 处 理 函 数 (event handler) ， 才 能 达成 目标 。 


事件 处 理 函 数 


事件 处 理 函 数 的 作用 是 ， 在 特定 事件 发 生 时 调用 特定 的 JavaScript 代 

码 。 例 如 ， 如 果 想 在 鼠标 指针 悬 停 在 某 个 元 素 上 时 触发 一 个 动作 ， 就 
需要 使 用 onmouseover 事件 处 理 函 数 ， 如 果 想 在 鼠标 指针 离开 某 个 元 
素 时 触发 一 个 动作 ， 就 需要 使 用 onmouseout 事件 处 理 函 数 。 在 我 的 
图 片 库 里 ， 我 想 在 用 户 点 击 某 个 链接 时 触发 一 个 动作 ， 所 以 需要 使 用 
onclick 事件 处 理 函 数 。 


需要 注意 的 是 showPic ( ) 函数 需要 一 个 参数 : 一 个 带 有 href 属性 的 
元 素 太 点 参数 。 当 我 把 onclick 事件 处 理 钞 数 藤 入 到 一 个 链接 中 时 ， 
需要 把 这 个 链接 本 身 用 作 showPic 函数 的 参数 。 


有 个 非常 简单 有 效 的 办 法 可 以 做 到 这 一 点 : 使 用 this 关键 字 。 这 个 关 
键 字 在 这 儿 的 含义 是 “这 个 对 象 ”。 上 有 具体 到 当前 的 例子 ，this 表示 “这 
个 <a> 元 素 玫 所”: 


showPic(this) 


综 上 所 述 ， 我 将 使 用 onclick 事件 处 理 函 数 来 给 链接 添加 行为 。 添 加 
事件 处 理 函 数 的 语法 如 下 所 示 : 


event = "JavaScript statement(s)" 


请 注意 ，JavaScript 代 码 包含 在 一 对 引号 之 间 。 我 们 可 以 把 任意 数量 的 
JavaScript 语 句 放 在 这 对 引号 之 间 ， 只 要 把 各 条 语句 用 分 号 隅 开 即 可 。 


下 面 这 样 onclick 事件 就 可 以 调用 showPic 方法 了 : 


onclick = "showPic(this);" 


不 过 ， 如 果 仅 仅 把 事件 处 理 范 数 放 到 图 片 列表 的 一 个 链接 中 ， 我 们 会 
遇 到 一 个 问题 ， 点 击 这 个 链接 时 ， 不 仅 showPic 函数 农 调 用， 链接 被 
点 击 的 默认 行为 也 会 被 调用 。 这 意味 着 用 户 还 是 会 被 带 到 图 片 查看 窗 
口 ， 而 这 是 我 不 希望 发 生 的 。 我 需要 阻止 这 个 黑 认 行为 被 调用 。 


让 我 们 近 距 离 了 解 一 下 事件 处 理 函 数 的 工作 机 制 。 在 给 某 个 元 素 添加 
了 事件 处 理 函 数 后 ， 一 旦 事件 发 生 ， 相 应 的 JavaScript 代 人 码 就 会 得 到 执 
行 。 被 调用 的 JavaScript 代 码 可 以 返回 一 个 值 ， 这 个 值 将 被 传递 给 那个 
事件 处 理 函 数 。 例 如 ， 我 们 可 以 给 某 个 链接 添加 一 个 onclick 事件 处 
理 函 数 ， 并 让 这 个 处 理 函 数 所 触发 的 JavaScript 代 码 返回 布尔 值 true 或 
false 。 这 样 一 来 ， 当 这 个 链接 被 点 击 时 ， 如 果 那 段 JavaScript 代 码 返 
回 的 值 是 true ，onclick 事件 处 理 函 数 就 认为 “这 个 链接 被 点 击 

了 ”， 反之， 如 果 返 回 的 值 是 false ，onclick 事件 处 理 函 数 就 认 

为 “这 个 链接 没有 被 点 击 ”。 


可 以 通过 下 面 这 个 简单 测试 去 验证 这 一 结论 


<a href="http://www.example.com" onclick="return false;">Click 


me</a> 


当 点 击 这 个 链接 时 ， 因 为 onclick 事件 处 理 函 数 所 触发 的 JavaScript 代 
码 返 回 给 它 的 值 是 false ， 所 以 这 个 链接 的 默认 行为 没有 被 触发 。 


同样 道理 ， 如 果 像 下 面 这 样 ， 在 onclick 事件 处 理 函 数 所 触发 的 
JavaScript 代 码 里 增加 一 条 return false 语句 ， 就 可 以 防止 用 户 被 种 
到 目标 链接 窗口 : 


onclick = "showPic(this); return false;" 


下 面 是 最 终 完 成 的 0nclick 事件 处 理 函 数 在 图 片 库 HTML 文 档 里 的 样 
于 : 


<1i> 

<a href="images/fireworks.jpg" onclick="showPic(this); 
= return false;" title="A fireworks display">Fireworks</a> 
</1i> 


接 下 来 ， 我 要 在 图 斤 列 表 的 每 个 链接 上 深 加 这 个 事件 处 理 夯 数 。 这 当 
然 有 些 麻 烦 ， 但 眼下 只 衣 这 么 做 我 们 将 在 第 6 章 介 绍 一个 旺 提 这 种 有 
烦 的 办 法 。 下 面 的 标记 文档 是 我 一 个 个 手动 添加 onclick 事件 处 理 画 
数 之 后 的 样子 : 


<1i> 
<a href="images/fireworks.jpg" onclick="showPic(this); 
=» return false;" title="A fireworks display">Fireworks</a> 
</1i> 
<1i> 
<a href="images/coffee.jpg" onclick="showPic(this); 
= return false;" title="A cup of black coffee">Coffee</a> 
</1i> 
<1i> 
<a href="images/rose.jpg" onclick="showPic(this); return 
false;" 
= title="A red, red rose">Rose</a> 
</1i> 
<1i> 
<a href="images/bigben.jpg" onclick="showPic(this); return 
false;" 
=» title="The famous clock">Big Ben</a> 
</1i> 


现在 ， 把 这 个 页 面 加 载 到 Web 浏 览 右 里 ， 你 将 看 到 一 个 能 够 正常 工作 
的 “JavaScript 图 片 库 ?: 如 图 4-3 所 示 ， 不 管 点 击 图 乒 列 表 里 的 哪个 链 
接 ， 都 能 在 这 个 页 面 里 看 到 相应 的 图 厂 。 


4.4 对 这 个 函数 进行 扩展 


在 一 个 网 页 上 切换 显示 不 同 的 图 片 并 不 是 什么 新 鲜 事 。 早 在 W3C 推 出 
它们 标准 化 的 DOM 和 JavaScript 语 言 之 前 ， 有 着 这 类 效果 的 网 页 和 脚本 
就 已 经 出 现 了 ， 如 今 更 是 得 到 了 广泛 的 流行 。 


在 这 种 情形 下 ， 如 有 果 想 让 自己 与 众 不 同 ， 就 必须 另辟蹊径 。 有 没有 想 
过 在 同一 个 网 页 上 切换 显示 不 同 的 文本 ? 利用 JavaScript 语 言 和 和 DOM ， 
确实 可 以 做 到 这 一 点 。 


图 片 库 文 档 里 的 每 个 图 片 链接 都 有 一 个 title 属性 。 可 以 把 这 个 属性 
取出 来 并 让 它 和 相应 的 图 乒 一 同 显示 在 网 页 上 。title 属性 的 值 可 以 
用 getAttribute 轻而易举 地 得 到 : 


Var text = whichpic.getAttribute("title"); 


光 提 取 title 属性 的 值 还 不 够 ， 我 们 还 需要 把 它 插入 到 HTML 文 档 
中 。 为 完成 这 一 工作 ， 我 需要 用 到 几 个 新 的 DOM 属 性 。 


4.4.1 childNodes 属性 


在 一 模 广 护 树 上 ，childNodes 属性 可 以 用 来 获取 任何 一 个 元 素 的 所 
有 子 元 素 ， 它 是 一 个 包含 这 个 元 素 全 部 子 元 素 的 数组 : 


element.childNodes 


假设 需要 把 某 个 文档 的 body 元 素 的 全 体 子 元 素 检 索 出 来 。 首 先 ， 我 们 
使 用 getElementsByTagName 得 到 body 元 素 。 因 为 每 份 文档 只 有 
一 个 body 元 素 ， 所 以 它 将 是 getElementsByTagName ("body") 方 
法 所 返回 的 数组 中 的 第 一 个 (也 是 唯一 一 个 ) 元 素 : 


var body_element = document.getElementsByTagName("body")[0]; 


现在 ， 变 量 body_element 已 经 指向 了 那个 文档 的 body 元 素 。 授 下 
来 ， 可 以 用 如 下 所 示 的 语法 获取 body 元 素 的 全 体 子 元 素 : 


body_element .childNodes 


这 显然 要 比 像 下 面 这 样 写 简 明 得 多 : 


document .getElementsByTagName("body")[90].childNodes 


[L 


人 道 如 何 获 取 body 元 素 的 全 体 子 元 素 卫 ， 接 下 来 看 看 这 些 
= 用 途 。 


首先 ， 可 以 精确 地 查 出 body 元 素 一 共有 多 少 个 子 元 素 。 因 为 


childNodes 属性 返回 的 是 一 个 数组 ， 所 以 用 数组 的 length 属性 就 
可 以 知道 它 所 包含 的 元 素 的 个 数 : 


body_element .childNodes.1length; 


现在 把 下 面 这 个 小 函数 添加 a 到 showPic .js 文件 里 : 


function countBodyChildren() { 
var body_element = document.getElementsByTagName("body")[0]; 


alert (body_element.childNodes.1length); 


这 个 简单 的 小 函数 将 弹出 一 个 alert 对 话 框 ， 显 示 body 元 素 的 子 元 
素 的 总 个 数 。 


我 想 让 这 个 函数 在 页 面 加 载 时 执行 ， 而 这 需要 使 用 onload 事件 处 理 画 
数 。 把 下 面 这 条 语句 添 加 到 代码 段 的 末尾 : 


window.onload = countBodyChildren; 


这 条 语句 的 作用 是 在 页 面 加 载 时 调用 countBodyChildren 函数 。 
在 Web 浏 览 器 里 刷新 gallery .html 文件 。 你 会 看 到 一 个 alert 对 话 
0 0 元 素 的 子 元 素 的 总 个 数 。 这 个 数字 很 可 能 会 
TE 上 区 二 | 保 


4.4.2 nodeType 属性 


根据 gallery .html 文件 的 结构 ，body 有 3 个 子 元 素 : 
个 hi 元素 、 一 个 ul 元 素 和 一 个 img 元 素 。 

countBodychildren() 画 画 数 给 由 来 的 数字 却 运 大 于 此 ， 这 是 因为 文 
档 树 的 节点 类 型 并 非 只 有 元 素 节 点 一 种 。 


由 childNodes 属性 返回 的 数组 包 售 所 有 类 型 的 节点 ， 而 不 仅仅 是 元 
素 万 点 。 事 实 上 ， 文 档 里 几乎 每 一 样 东西 都 旦 一 个 节点 ， 甚 至 连 空格 
和 换行 符 都 会 被 解释 为 万 点 ， 而 它们 也 全 都 包含 在 chi1dNodes 属性 
所 返回 的 数组 当中 。 


因此 ，countBodyChildren 的 返回 结果 才 会 这 么 大 。 

还 好 ， 每 一 个 节点 都 有 nodeType 属性 。 这 个 属性 可 以 让 我 们 知道 自 
ee 差劲 的 一 点 是 nodeType 的 值 并 不 是 英 
用 下 面 的 语法 获取 广 点 的 nodeType 属性 : 


node.nodeType 


nodeType 的 值 是 一 个 数字 而 不 是 像 “element” 或 “attribute” 那 样 的 英文 
字符 串 。 
为 了 验证 这 一 点 ， 把 countBodyChildren 中 的 alert 语句 替换 为 下 


面 这 条 语句 ， 这 样 一 来 ， 我 们 残 可 以 知道 body_element 元 素 的 
nodeType 属性 了 : 


alert(body_element.nodeType); 


在 Web 浏 览 器 里 刷新 gallery .html 文件 ， 将 看 到 一 个 显示 数字 “1” 的 
alert 对 话 框 。 换 名 话说， 元 素 丰 点 的 nodeType 属性 值 是 1。 


nodeType 属性 总 共有 12 种 可 取 值 ， 但 其 中 仅 有 3 种 具有 实用 价值 。 
。 元 素 节 点 的 nodeType 属性 值 是 1。 


。 属性 节点 的 nodeType 属性 值 是 2 。 
。 文本 节点 的 nodeType 属性 值 是 3。 


这 就 意味 着 ， 可 以 让 画 数 只 对 特定 类 型 的 节 点 进行 处 理 。 例 如 ， 完 全 
可 以 编写 出 一 个 只 处 理 元 素 节 点 的 函数 。 


4.4.3 ”在 标记 里 增加 一 段 描述 


为 增强 我 的 岁 片 库 函 数 ， 我 决定 维护 一 个 文本 节点 。 我 想 在 显示 图 请 
时 ， 把 这 个 文本 节点 的 值 蔡 换 成 目标 图 片 链接 的 title 的 值 。 


首先 ， 需 要 为 目标 文本 安排 显示 位 置 。 我 在 gallery .html 文件 里 增 
加 一 个 新 的 文本 段 。 我 把 它 安排 在 <ijmg> 标签 之 后 ， 为 它 设 置 一 个 独 
一 无 二 的 id 值 ， 这 样 束 能 在 JavaScript 画 数 里 方便 地 引用 它 : 


<p id="description">Choose an image.</p> 


上 面 这 条 语句 将 把 <p> 元 素 的 id 属性 设置 为 description ( 描 
述 ) ， 这 个 id 可 以 让 这 个 元 素 的 用 途 一 目 了 然 。 如 图 4-4 所 示 ， 包 含 在 
此 元 素 里 的 文本 现在 是 “Choose an image.”"， 你 能 看 到 添加 了 新 段落 。 


Image 
Gallery 


Choose an image. 


图 4-4 

我 想 达 到 的 效果 是 ， 在 某 个 图 片 链接 被 点 击 时 ， 不 仅 要 把 “ 占 位 符 ” 图 
片 替换 为 那个 链接 的 href 属性 所 指向 的 图 片 ， 还 要 把 这 段 文本 同时 赫 
换 为 那个 图 片 链接 的 title 属性 值 。 为 了 实现 这 一 效果 ， 对 showPic 
函数 要 做 一 些 改进 。 

4.4.4 用 JavaSscript 改 变 这 段 描述 


在 图 片 链接 被 点 击 时 ， 为 了 能 动态 地 用 图 片 的 title 替换 掉 图 片 说 
明 ， 我 需要 对 showPic 函数 做 一 些 修改 。 


下 面 是 showpic 画 数 现在 的 样子 ， 


function ShowPic(whichpic) { 
var Source = whichpic.getAttribute("href"),; 
Var placeholder = = document .getElementById("placeholder"); 


placeholder.setAttribute("src", Source ) ， 


首先 ， 我 需要 在 showPic( ) 夯 数 里 效 加 一 条 语句 来 获取 whichpic 对 
象 的 title 属性 值 。 我 将 把 这 个 值 存 入 text 变量 。 这 件 事 可 以 轻 而 
易 举 地 利用 getAttribute 完成 : 


var text = whichpic.getAttribute("title"); 


接 下 来 ， 为 了 能 方便 地 引用 id 为 description 的 文本 段落 ， 我 创建 
一 个 新 的 变量 来 存放 它 : 


var description = document.getElementById("description"); 


下 面 是 增加 变量 之 后 的 样子 : 


function ShowPic(whichpic) { 
var Source = whichpic.getAttribute("href'" ) ， 
Var placeholder = = document .getElementById("placeholder"); 
placeholder.setAttribute("src",source); 


Var text = whichpic.getAttribute("title"); 
var description = document.getElementById("description"); 


一 个 任务 是 实现 文本 的 切换 。 
4.4.5 nodeValue 属性 


如 琳 想 改变 一 个 文本 太后 的 值 ， 那 束 使 用 DOM 提 供 的 nodeValue 属 
性 ， 它 用 来 得 到 (和 设置 ) 一 个 节点 的 值 : 


node.nodeValue 


但 这 里 有 个 大 家 必须 注意 的 细节 : 在 用 nodeValue 属性 获取 
description 对 象 的 值 时 ， 得 到 的 并 不 是 包含 在 这 个 段落 里 的 文本 。 
可 以 用 下 面 这 条 alert 语句 来 验证 这 一 点 : 


alert (description.nodeVvalue); 


这 个 调用 将 返回 一 个 null 值 。<p> 元 素 本 身 的 nodeValue 属性 是 一 
个 空 值 ， 而 你 真正 需要 的 是 <p> 元 素 所 包含 的 文本 的 值 。 


包含 在 <p> 元 素 里 的 文本 是 另 一 种 和 点 ， 它 是 <p> 元 素 的 第 一 个 于 订 
点 。 因 此 ， 你 想 要 得 到 的 其 实 是 它 的 第 一 个 子 世 点 的 nodevalue 属性 


下 面 这 条 alert 语句 可 以 显示 你 想 要 的 内 容 : 


alert(description.childNodes[0].nodevalue); 


这 个 调用 的 返回 值 才 是 我 们 正在 寻找 的 “Choose an image.”°。 这 个 值 来 
自 childNodes 数组 的 第 一 个 (下 标 是 0) 元 素 。 


4.4.6 firstchild 和 lastchild 属性 


数组 元 素 childNodes[0] 有 个 更 直观 易 读 的 同义词 。 无 论 何 时 何 
地 ， 只 要 需要 访问 childNodes 数组 的 第 一 个 元 素 ， 都 可 以 把 它 写 成 
firstChild : 


node.firstchild 


这 种 写法 与 下 面 的 写法 完全 等 价 : 


node.childNodes[0] 


这 不 仅 更 加 简短 ， 还 更 加 具有 可 读 性 。 
DOM 还 提供 了 一 个 与 之 对 应 的 1astChild 属性 : 


node.lastchild 


这 代表 着 chi1dNodes 数组 的 最 后 一 个 元 隶 。 如 采 不 想 通 过 
lastChild 属性 去 访问 这 个 市 态 ， 将 不 得 不 使 用 如 下 所 示 的 语法 : 


node.childNodes[node.childNodes.1length-1] 


与 集 明 易 民 的 lastchild 相 比 ， 这 么 复 沫 的 语法 记号 倍 怕 没 人 会 言 
欢 。 


4.4.7 利用 nodeValue 属性 刷新 这 段 描述 


现在 ， 我 们 回 到 showPic 函数 。 我 将 刷新 id 等 于 description 的 
<p> 元 系 所 包含 的 文本 节点 的 nodeValue 属性 。 


具体 到 这 个 id 等 于 description 的 <p> 元 素 ， 因 为 它 只 有 一 个 子 节 
点 ， 所 以 选用 description.,firstchild 属性 和 选用 
description.lastchild 属性 的 效果 是 完全 一 样 的 。 既 然 如 此 ， 我 
决定 选用 firstchild 属性 。 


可 以 把 alert 语句 改写 为 如 下 所 示 的 样子 : 


alert(description.firstcChild.nodeVvalue); 


显示 的 效 采 完全 一 样 (都 将 显示 “Choose an image.” 消 息 ) ， 但 这 里 的 
代码 显然 更 容易 阅读 和 理解 。 


nodeValue 属性 的 用 途 并 非 仅 限于 此 。 它 不 仅 可 用 来 检索 证 点 的 值 ， 
还 可 以 用 来 设置 节点 的 值 ， 后 一 种 用 途 正 是 我 目前 最 需要 的 。 


还 记得 刚才 在 showPic 画 数 里 的 text 变量 吗 ? 当 图 片 库 页 面 上 的 某 
个 图 片 链接 被 点 击 时 ，showPic 函数 会 把 这 个 链接 的 title 属性 值 传 
递 给 text 变量 。 而 我 现在 将 用 text 变量 去 刷新 id 值 等 于 
description 的 那个 <p> 元 素 的 第 一 个 子 节 点 的 nodeValue 属性 
值 ， 如 下 所 示 : 


description.firstChild.nodeValue = text; 


下 面 是 为 了 改进 showPic( ) 琅 数 而 添加 的 三 条 新 语句 : 


Var text = whichpic.getAttribute("title"); 
var description = document.getElementById("description"); 


description.firstChild.nodeValue = text; 


如 条 用 日 单 用 语 来 说 ， 这 三 条 语句 的 侣 义 依次 是 : 


。 当 图 片 库 页 面 上 的 某 个 图 片 链 接 被 点 击 时 ， 这 个 链接 的 title 属 
性 值 将 被 提取 并 保存 到 text 变量 中 

。 得 到 id 是 "description" 的 <p> 元 素 ， 并 把 它 保 存 到 变量 
description 里 ; 

。 把 description 对 象 的 第 一 个 子 节 点 的 nodeValue 属性 值 设 置 
为 变量 text 的 值 。 


下 面 是 最 终 的 代码 清单 : 


function ShowPic(whichpic) { 
var Source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder.setAttribute("src",source); 
var text = whichpic.getAttribute("title"); 


var description = document.getElementById("description"); 
description.firstchild.nodevalue = text; 


} 


把 改进 后 的 showPic( ) 函数 存 入 showPic .js 文件 ， 然 后 在 浏览 器 
里 刷新 gallery .html 文档， 你 就 可 以 看 到 这 个 扩展 功能 了 。 现 在 ， 
点 击 这 个 网 页 上 的 某 个 图 片 链接 时 ， 你 将 看 到 两 种 效果 :“ 占 位 符 ” 图 
片 被 奉 换 为 这 个 链接 所 指 癌 的 一 张 新 图 片 ， 同 时 描述 性 文字 也 被 替换 
为 这 个 链接 的 title 属性 值 ， 如 图 4-5 所 示 。 
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图 4-5 


你 可 以 在 http://friendsofed.com/ 网 站 上 找到 图 片 库 脚 本 文件 和 标记 文 
档 。 我 在 示例 中 用 到 的 所 有 图 片 也 可 以 在 那里 找到 ， 但 我 建议 大 家 找 
一 些 自己 的 图 片 来 测试 这 个 脚本 ， 那 样 会 更 有 意思 。 


2 这 个 图 片 库 更 美观 ， 可 以 再 给 它 增 加 一 个 像 下 面 这 样 的 样式 


body { 
font-family: "Helvetica","Arial", serif; 
color: #333; 
background-color: #ccc; 
margin: 1em 10%; 


color: #333; 
background-color: transparent; 


color: #c60; 

background-color: transparent; 
font-weight: bold; 
text-decoration: none; 


} 
ul { 
padding: 0; 


1i { 

float: left; 

padding: iem; 

list-style: none; 

} 

img { 
display:block; 
clear :both; 

} 


请 把 这 些 CSS 代 码 存 入 layout .css 文件 ， 并 把 这 个 文件 存放 到 
styles 子 目录 里 。 然 后 ， 在 gallery .html 文档 的 <head> 部 分 用 
一 个 <Link> 标签 来 引用 这 个 文件 ， 如 下 所 示 : 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Image Gallery</title> 
<link rel="stylesheet" href="styles/layout.css" media="screen" /> 
</head> 
<body> 


<h1>SnapshotSs</h1> 
<ul> 
<1i> 
<a href="images/fireworks.jpg" title="A fireworks display" 
=» OnNclick="showPic(this); return false;">Fireworks</a> 
</1i> 
<1i> 
<a href="images/coffee.jpg" title="A cup of black coffee" 
= OnNclick="showPic(this); return false;">Coffee</a> 
</1i> 
<1i> 
<a href="images/rose.jpg" title="A red, red rose" 
=™» OnNclick="showPic(this); return false;">Rose</a> 
</1i> 
<1i> 
<a href="images/bigben.jpg" title="The famous clock" 
=™» OnNclick="showPic(this); return false;">Big Ben</a> 
</1i> 
</U]> 
<img id="placeholder" src="images/placeholder.gif" alt="my image 
gallery" /> 
<p id="description">Choose an image.</p> 
<script src="scripts/showpPic.js"></script> 
</body> 
</html> 


图 4-6 是 图 片 库 的 显示 效果 。 
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图 4-6 
4.5 小结 


本 章 介绍 了 一 个 简单 的 JavaScript 应 用 案例 ， 还 介绍 了 DOM 提 供 的 几 个 
新 属性 ， 它 们 是 : 


。 childNodes 
。 nodeType 

。 NnodeValue 
。 firstChild 
lastcChild 


本 章 的 学 习 重 点 有 两 个 : 一 是 如 何 利 用 DOM 所 提供 的 方法 去 编写 图 片 
二 是 如 何 利用 事件 处 理 函 数 把 JavaScript 代 码 与 网 页 集成 在 一 
Eo 


从 表面 上 看 ， 我 们 的 图 片 库 已 经 大 获 成 功 ， 但 它 实际 上 还 有 许多 地 方 
值得 改进 ， 而 那 将 是 随后 两 章 里 的 讨论 重点 。 


下 一 章 将 介绍 一 些 JavaScript 脚 本 编程 方面 的 最 佳 实践 ， 你 会 从 中 领悟 
这 样 一 个 道理 : 达成 目标 的 过 程 与 目标 本 身 同样 重要 。 


第 6 章 我 们 将 把 这 些 最 佳 编程 实践 应 用 到 图 片 库 脚 本 上 。 


第 5 章 最 佳 实践 


本 章 内 容 

。 确保 网 页 在 没有 JavaScript 的 情况 下 也 能 正常 工 

。 分 离 JavaScript: 把 网 页 的 结构 和 内 容 与 JavaScript 脚 本 的 动作 
行为 分 开 。 

。 问 后 兼容 性 : 确保 老 版 本 的 浏 贤 器 不 会 因为 你 的 JavaScript 脚 
本 而 死 掉 。 

。 性 能 考虑 ， 确定 脚本 执行 的 性 能 最 优 。 

JavaScript 语 言 和 DOM 构 成 了 一 个 功能 非常 强大 的 组 合 ， 但 问题 的 天 键 


征 你 能 否 恰到好处 地 运用 它们 所 提供 的 功能 。 本 章 将 介绍 一 些 最 佳 实 
践 ， 帮 助 你 保证 编写 出 来 的 脚本 不 会 与 你 的 愿望 背道而驰 。 


5.1 过 去 的 错误 
在 讨论 最 佳 实践 之 前 ， 先 来 了 解 一 下 出 问题 的 原因 。 
5.1.1 不 要 怪罪 JavaScript 


易学 易 用 的 技术 束 像 一 把 双 六 伸 。 因 为 容易 学 习 和 和 掌握， 它们 往往 会 
A 泛 接 受 ， 但 也 往往 意味 着 缺乏 高 水 平 的 质 
量 控制 措施 。 


HTML 语 言 束 古 一 个 很 好 的 例子 。 万 维 网 之 所 以 会 出 现 爆 炸 性 的 增长 ， 
HTML 语 言 易学 易 用 的 特点 是 无 可 否认 的 一 个 原因 。 人 们 只 需 花 费 很 短 
的 时 间 束 能 掌握 HTML 语 言 的 基本 知识 ， 并 迅速 地 创建 出 各 种 各 样 的 网 
页 。 事 实 上 ， 随 着 “所 见 即 所 得 ”网 页 设计 工具 的 出 现 和 流行 ， 有些 人 
可 能 连 一 行 HTML 标 记者 没有 见 过 整 成 了 网 页 设计 大 军 中 的 一 员 。 


因此 产生 的 一 个 不 民 后 有 果 是 ， 绝 大 多 数 网 页 都 编写 得 很 糟 粹 ， 甚 至 不 
做 标记 合法 性 检查 。 因 此 ， 软 件 三 两 不 得 不 让 它们 的 浏 贤 器 以 尽 可 能 
宽松 的 方式 去 处 理 网 页 。 每 种 浏览 器 都 有 相当 一 部 分 代码 专门 用 来 处 
i 不 清 的 HTML 标 记 ， 以 及 狂 测 网 页 的 创作 者 们 到 改 想 如 何 呈 
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理论 上 讲 ， 在 如 今 的 web 上 有 数 十 亿 计 的 HTML 文档 ; 但 事实 上 ， 这 些 
文档 中 只 有 一 少 部 分 有 着 良好 的 结构 。 这 种 历史 遗留 问题 使 得 XHTML 
和 CSS 等 新 技术 在 Web 上 的 推广 和 应 用 遇 到 了 很 大 的 阻力 。 易 学 易 用 的 
HTML 语 言 既 是 万 维 网 的 福音 ， 又 是 它 的 愤 梦 。 


与 HTML 语 言 相 比 ，JavaScript 语 言 的 生存 环境 的 要 求 要 苛刻 得 多 。 如 
果 JavaScript 代 码 不 符合 语法 规定 ，JavaScript 解 释 器 (对 Web 应 用 而 言 
就 是 浏 蜗 器 将 拒绝 执行 它们 并 报错 ， 而 浏览 絮 在 过 到 不 符合 语法 规 
定 的 HTML 代码 时 ， 则 会 于 方 百 计 地 将 其 呈现 出 来 。 尽 管 如 此 ， 在 如 今 
的 Web 上 还 是 充 不 着 质量 低劣 的 JavaScript 代 码 。 


许多 网 页 设计 者 并 不 舍得 花费 时 间 去 学 习 JavaScript 语 言 ， 而 只 是 把 一 
些 现成 的 JavaScript 代 人 码 直 接 剪 贴 到 HTML 文 档 里 以 使 网 页 更 加 丰 宇 多 

彩 。 事 实 上 ，JavaScript 语 言 诞 生 后 不 久 ， 市 场 上 就 出 现 了 许多 能 让 人 
们 把 JavaScript 代 码 片 段 答 入 或 天 联 到 HTML 文 档 的 “所 见 即 所 得 ”的 网 

页 设计 工具 。 


其 实 ， 即 使 没有 那些 “所 见 即 所 得 ”的 网 页 设计 工具 ， 把 JavaScript 代 码 
岁入 或 天 联 到 HTML 文 档 也 不 是 难事 。 有 许多 网 站 和 书刊 专门 提供 各 种 
现成 的 JavaScript 男 数 并 号 称 便于 使 用 。 一 时 间 ,“ 茧 切 和 烙 贴 ”成 了 编 
写 JavaScript 脚 本 的 代名词 。 


不 季 的 是 ， 这 些 现成 的 JavaScript 函 数 里 有 很 多 对 问题 考虑 得 并 不 局 
全 。 从 表面 上 看 ， 它 们 都 能 完成 目 己 的 任务 并 给 网 页 囊 来 新 绪 动 人 的 
交互 效果 ; 但 在 实际 应 用 中 ， 它 们 当中 只 有 很 少 一 部 分 能 够 在 
JavaScript 和 被 禁用 时 对 网 页 的 行为 做 出 妥善 的 安排 。 很 多 时 候 ， 一 旦 浏 
览 右 不 文 持 或 禁用 了 JavaScript 解 释 功 能 ， 那 些 质量 低劣 的 脚本 就 会 导 
致 用 户 无 法 浏 唤 相应 的 网 页 其 至 整个 网 站 。 因 为 这 类 问题 频繁 发 生 ， 
2 久 ，“JavaScript” 就 在 许多 人 的 脑海 里 成 为 了 “网 页 无 法 访问 ”的 
司 义 词 。 


事实 上 ，JavaScript 与 “网 页 无 法 访问 ”无 任何 必然 的 联系 ， 网 页 能 否 访 
问 完 全 取决 于 如 何 应 用 JavaScript。 一 首 老 歌 中 这 样 写 道 : 不 在 于 你 做 
什么 ， 只 在 于 你 怎么 做 。 


5.1.2 ”Flash 的 遭遇 


客观 地 讲 ， 没 有 不 好 的 技术 ， 只 有 没有 用 好 的 技术 。JavaScript 的 坎坷 
遭遇 主 我 不 禁 想 起 了 另 一 种 被 人 们 站 用 的 技术 : Adobe 公 司 人 研发 的 
Flash。 


现在 ， 有 不 少 人 一 提起 Flash 吏 会 想到 烦人 的 前 导 页 面 、 超 长 的 下 载 时 
间 和 随时 都 有 可 能 出 问题 的 浏览 体验 。 这 些 恶 劣 印象 其 实 与 Flash 毫 不 
相干 ， 它 们 都 是 由 那些 质量 低劣 的 实现 脚本 造成 的 。 


把 Flash 与 超 长 的 下 载 时 间 联 系 在 一 起 很 不 公平 ， 因 为 制作 短小 精 悍 的 
矢量 图 形 和 视频 片段 本 是 Flash 技 术 的 强项 之 一 。 利 用 Flash 技 术 制 作 一 
些 视频 片段 来 介绍 自己 的 网 站 是 一 个 很 好 的 创意 ， 但 当 这 种 做 法 成 为 
一 种 渭 流 时 ， 这 类 视频 厂 段 的 数量 越 来 越 多 、 体 积 也 越 来 越 大 ， 网 页 
的 下 载 时 间 也 不 可 避免 地 变 得 越 来 越 长 。 此 时 ，Flash 要 想 洗 刷 挥 上 自己 
刁 上 的 恶名 谈何容易 。 

类 似 地 ，JavaScript 本 是 一 种 能 让 网 页 变 得 易于 访问 的 技术 ， 然 而 它 却 
也 有 着 降低 网 站 可 用 性 和 可 访问 性 的 坏 名 声 。 

正如 物理 学 中 的 运动 与 惯性 定律 所 描述 的 那样 ， 如 果 人 们 在 开始 使 用 
一 种 新 技术 时 没有 经 过 深思 熟 虑 ， 而 这 种 新 技术 又 很 快 地 成 为 了 一 种 
潮流 ， 则 纠正 在 早期 阶段 养 成 的 坏 习 惯 将 会 非常 困难 。 


我 敢 说 ， 之 所 以 会 有 那么 多 的 网 站 迫不及待 地 在 网 页 上 舱 入 一 些 盈 
必要 的 Flash 视 频 户 段 ， 是 因为 "大 家 都 有 ， 所 以 我 也 要 有 ”的 心理 而 不 
是 因 为 实际 应 用 的 需要 。 既 然 别 人 的 网 页 上 有 有 Flash 动画， 那么 我 的 网 
页 上 也 要 有 有 Flash 动画， 有 无 必要 的 问题 已 无 人 问津 了 。 


JavaScript 也 遭遇 到 了 类 似 的 命运 : 人 们 只 关心 目 己 的 网 页 里 有 没有 
JavaScript 代 码 ， 根 本 不 去 考虑 那些 现成 的 (尤其 是 那些 由 “所 见 即 所 
得 ”网 页 设计 工具 生成 的 ) JavaScript 函 数 本 身 有 没有 漏洞 ， 以 及 它们 会 
\ 会 给 网 页 市 来 负面 影响 。JavaScript 代 码 和 被 人 们 剪贴 来 、 剪 贴 去 ， 结 
果 弄 得 网 上 到 处 都 是 似是而非 的 JavaScript 网 页 ， 却 没 人 想到 应 该 首先 
仍 查 一 下 那些 现成 的 JavaScript 函 数 是 否 还 需要 改进 。 


5.1.3 ”质疑 一 切 


不 管 你 想 通 过 JavaScript 改 变 哪个 网 页 的 行为 ， 都 必须 三 思 而 后 行 。 首 
先 要 确认 :为 这 个 网 页 增加 这 种 额外 的 行为 是 否 确 有 必要 ? 


网 站 对 JavaScript 的 滥用 已 经 持续 了 相当 长 的 时 间 ， 因 为 滥用 JavaScript 
而 给 自己 带 来 种 种 麻烦 的 网 站 也 绝 不 是 少数 。 例 如 ， 你 可 以 用 
J ns 口 在 屏幕 上 四 处 移动 ， 甚 至 让 浏览 器 窗口 产 


在 所 有 的 JavaScript 特 效 当 中 ， 最 具名 昭著 的 莫 过 于 那些 在 人 们 打开 网 
页 时 弹出 的 广告 窗口 。 对 JavaScript 和 DOM 脚 本 编写 者 来 说 不 幸 的 是 ， 
有 不 少 用 户 为 此 干脆 彻底 禁用 了 JavaScript。 浏 览 器 厂商 也 在 各 自 的 产 
人 告 过 滤 机 制 来 解决 这 一 问题 ， 但 广告 还 是 无 


弹出 的 广告 窗口 和 内 容 履 盖 是 一 个 典型 的 滥用 JavaScript 的 例子 。 从 技 
术 上 讲 ， 弹 出 窗口 本 映 是 一 项 很 实用 的 功能 ， 它 解决 了 网 页 设计 工作 
中 的 一 个 难题 : 如 何 同 用 户 发 送信 息 。 但 在 实践 中 ， 频 党 弹出 的 广告 
窗口 却 让 用 户 不 胜 其 烦 。 那 些 弹 出 窗口 必须 由 用 户 关 闭 ， 而 这 往往 会 
形成 一 种 拉锯 成 用 户 刚 关闭 了 一 个 广告 窗口 ， 屏 幕 上 又 弹出 一 
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那么 ， 这 一 功能 要 如 何 使 用 户 受 花呢 ? 


令 人 感到 欣慰 的 是 ， 这 一 问题 正 越 来 越 党 到 人 们 的 关注 ， 那 些 不 遵 
循 “用 户 至 上 ”原则 的 网 站 从 长 远 看 ， 部 在 目 取 火 亡 。 


如 果 要 使 用 JavaScript， 就 要 确认 : 这 么 做 会 对 用 户 的 浏览 体验 产生 怎 
还 有 个 更 重要 的 问题 : 如 采用 户 的 浏览 右 不 文 持 JavaScript 
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5.2 平稳 退化 


记 住 ， 网 站 的 访问 者 完全 有 可 能 使 用 的 是 不 支持 JavaScript 的 浏 贤 器 ， 

还 有 一 种 可 能 是 虽然 浏览 器 支持 JavaScript， 但 用 户 已 经 禁用 它 了 ( 比 

如 ， 因 为 讨厌 看 到 弹出 广告 ) 。 如 果 没 有 考虑 到 这 种 情况 ， 人 们 在 访 

网 站 时 承 有 可 能 通 到 各 种 各 样 的 及 烦 ， 并 因此 不 再 来 访问 你 
门 的 网 站 。 


如 果 正 确 地 使 用 了 JavaScript 脚 本 ， 就 可 以 让 访问 者 在 他 们 的 浏览 器 不 
支持 JavaScript 的 情况 下 仍 能 顺利 地 浏览 你 的 网 站 。 这 就 是 所 谓 的 平稳 
退化 (graceful degradation) ， 就 是 说 ， 虽 然 某 些 功能 无 法 使 用 ， 但 最 
基本 的 操作 仍 能 顺利 完成 。 


我 们 来 看 一 个 在 新 窗口 里 打开 一 个 链接 的 例子 。 别 担心 : 我 们 将 要 讨 
论 的 并 不 是 在 网 页 加 载 时 弹出 新 窗口 。 而 是 在 用 户 点 击 某 个 链接 时 弹 
出 一 个 新 窗口 。 这 其 实 是 一 项 相当 实用 的 功能 。 例 如 ， 在 许多 电子 商 
务 网 站 的 结算 页 面 上 都 有 一 些 指 癌 服 务 条 球 或 是 邮寄 费用 表 的 链接 ， 
与 其 让 用 户 在 点 击 这 些 链接 时 被 市 离 当前 页 面 ， 不 如 让 用 户 仍 停留 在 
当前 页 面 ， 并 用 一 个 弹出 窗口 来 显示 相关 信息 。 


注意 ”应 该 只 在 绝对 必要 的 情况 下 才 使 用 弹出 窗口 ， 因 为 这 将 率 
涉 到 网 页 的 可 访问 性 问题 ， 例 如 ， 用 户 使 用 的 屏幕 读 取 软件 无 法 
向 用 户 说 明 弹 出 了 窗口 。 因 此 ， 如 果 网 页 上 的 某 个 链接 将 弹出 新 
窗口 ， 最 好 在 这 个 链接 本 身 的 文字 中 予以 说 明 。 


JavaScript 使 用 window 对 象 的 open( ) 方法 来 创建 新 的 浏览 器 窗口 。 这 
个 方法 有 三 个 参数 : 


window.open(url,name, features ) 


这 三 个 参数 都 和 可 选 的 。 


。 第 一 个 参数 是 想 在 新 窗口 里 打开 的 网 页 的 URL 地 址 。 如 果 省 略 这 
个 参数 ， 屏 幕 上 将 弹出 一 个 空白 的 浏览 器 窗口 。 

。 第 二 个 参数 是 新 窗口 的 名 字 。 可 以 在 代码 里 通过 这 个 名 字 与 新 窗 
口 进行 通信 。 

最 后 一 个 参数 是 一 个 以 逗号 分 隔 的 字符 串 ， 其 内 容 是 新 窗口 的 各 
种 属性 。 这 些 忆 性 包 打 新 窗口 的 八 士 《 视 度 和 高 度 ) 以 及 新 窗口 
被 启用 或 禁用 的 各 种 浏览 功能 〈 工 具 条 、 荣 单条 、 初 始 显示 位 
ee 对 于 这 个 参数 应 该 掌握 以 下 原则 : 新 窗口 的 浏览 功 


open( ) 方 # 法 是 使 用 BOM 的 一 个 好 案例 ， 它 的 功 和 EE 对 文档 的 内 容 也 无 
任何 影响 〈 那 是 DOM 的 地 盘 ) 。 这 个 方法 只 与 浏览 环境 (具体 到 这 个 
例子 ， 就 是 window 对 象 ) 有 关 。 


下 面 这 个 函数 是 window,open( ) 方法 的 一 种 典型 应 用 : 


function popUp(winURL) { 
window.open(winURL, "popup", "width=320, height=480"); 


} 


这 个 画 数 将 打开 一 个 320 像 素 宽 、480 像 素 高 的 新 窗口 “popup”。 因 为 我 
在 这 个 画 数 里 已 为 新 窗口 命 各， 所 以 当 把 新 的 URL 地 址 传递 给 此 画 数 
时 ， 这 个 范 数 将 把 新 窗口 里 的 现 有 文档 殖 换 为 新 URL 地 址 处 的 文档 ， 

而 不 是 再 去 创建 一 个 新 窗口 。 


我 将 把 这 个 函数 存 入 一 个 外 部 文件 。 因 此 ， 当 需要 在 1 
此 函数 时 ， 只 要 在 这 个 网 页 的 <head> 部 分 用 一 个 <script> 标签 
入 那个 外 部 文件 即 可 。 函 数 本 号 不 会 对 网 页 的 可 访问 性 产生 任何 影 

啊 ， 会 影响 到 网 页 的 只 是 : 我 将 如 何 使 用 此 函数 。 


调用 popUp 画 数 的 一 个 办 法 是 使 用 伪 协 议 (pseudo-protocol) 


5.2.1 “javascript:” 伪 协议 


“ 真 ” 协 议 用 来 在 因特网 上 的 计算 机 之 间 传 输 数 据 包 ， 如 HTTP 协 议 
(http://) 、FTP 协 议 (ftp:/) 等 ， 伪 协议 则 是 一 种 非 标准 化 的 协 
议 。“javascript:” 伪 协议 让 我 们 通过 一 个 链接 来 调用 JavaScript 函 数 。 


下 面 是 通过 “javascript:” 伪 协议 调用 popUp( ) 芳 数 的 具体 做 法 : 


<a href="javascript:popUp('http://www.example.com/');">Example</a> 


这 条 语句 在 支持 “javascript:” 伪 协议 的 浏览 器 中 运行 正常 ， 较 老 的 浏览 
如 则 会 去 笑 试 打开 那个 链接 但 失败 ， 支 持 这 种 伪 协 议 但 蔡 用 了 
JavaScript 功 能 的 浏览 右 会 什么 也 不 做 。 


总 之 ， 在 HTML 文 档 里 通过 “javascript:* 伪 协议 调用 JavaScript 代 码 的 做 
法 非常 不 好 。 


5.2.2 ”内 赂 的 事件 处 理事 数 


我 们 已 经 在 第 4 章 的 图 片 库 脚本 见识 过 事件 处 理 函 数 的 用 途 和 用 法 了 : 
把 onclick 事件 处 理 函 数 作 为 属性 租 入 <a> 标签 ， 该 处 理 函 数 将 在 
onclick 事件 发 生 时 调用 图 片 切换 函数 。 


这 个 技巧 同样 可 以 用 来 调用 popUp 函数 。 但 当 在 某 个 链接 里 用 
onclick 事件 处 理 函 数 去 打开 新 窗口 时 ， 这 个 链接 的 href 属性 似乎 
没有 什么 用 处 一 一 与 这 个 链接 有 关 的 重要 信息 已 经 都 包括 在 它 的 
onclick 属性 里 了 。 这 也 正 是 我 们 经 常会 看 到 如 下 所 示 的 链接 的 原 
因 : 


<a href="#" onclick="popUp('http://www.example.com/'); 


=» return false;">Example</a> 


因为 在 上 面 这 条 HTML 指 令 里 使 用 了 return false 语句 ， 这 个 链接 

\ 会 真 的 被 打开 。“ 护 符号 是 一 个 仅 供 文档 内 部 使 用 的 链接 记号 〈 单 就 
这 条 指令 而 言 , “ 护 是 未 指向 任何 目标 的 内 部 链接 ) 。 在 某 些 浏览 器 
里 ,，“ 护 链接 指 回 当前 文档 的 开头 。 把 href 属性 的 值 设置 为 “#? 只 是 为 
了 创建 一 个 空 链 接 。 实 际 工作 全 部 由 onclick 属性 负责 完成 。 


很 遗憾 ， 这 个 技巧 与 用 “javascript:” 伪 协议 调用 JavaScript 代 码 的 做 法 同 
样 糟 料 ， 因 为 它们 都 不 能 平稳 退化 。 如 果 用 户 已 经 禁用 了 浏 贤 器 的 
JavaScript 功 能 ， 这 样 的 链接 将 宫 无 用 处 。 


5.2.3” 谁 关心 这 个 


或 许 你 对 我 反复 强调 "平稳 退化 > 有 些 不 解 ， 让 那些 不 支持 或 禁用 了 
JavaScript 功 能 的 浏览 器 也 能 顺利 地 访问 你 的 网 站 真 的 那么 重要 吗 ? 


请 想象 一 下 ， 有 个 访问 者 来 到 了 你 的 网 站 ， 他 总 是 在 浏览 Web 时 同时 至 
用 图 像 和 JavaScript。 你 肯定 认为 如 今 这 样 的 用 户 已 非常 少见 ， 而 事实 
也 正 是 如 此 。 但 这 个 访问 者 非常 重要 。 


你 想象 的 那个 用 户 是 一 个 搜索 机 器 人 (searchbot) 。 搜 索 机 器 人 是 一 
种 自动 化 的 程序 ， 它 们 浏览 Web 的 目的 是 为 了 把 各 种 网 页 添加 到 搜索 引 
擎 的 数据 库 里 。 各 大 搜索 引擎 都 有 类 似 的 程序 。 目 前 ， 只 有 极 少 数 搜 
索 机 器 人 能 够 理解 JavaScript 人 代码。 所 以 ， 如 果 你 的 JavaScript 网 页 不 能 
平稳 退化 ， 它 们 在 搜索 引 敬 上 的 排名 束 可 能 大 受 损害 。 


具体 到 popUp( ) 函数 ， 为 其 中 的 JavaScript 代 码 预 留 出 退路 很 简单 : 在 
链接 里 把 href 属性 设置 为 真实 存在 的 URL 地 址 ， 计 它 成 为 一 个 有 效 的 
链接 ， 如 下 所 示 : 


<a href="http://www.example.com/" 


学 OnNnclick="popUp('http://www.example.com'; return 
false;">Example</a> 


因为 URL 地 址 出 现 了 两 次 ， 上 面 这 些 代码 显得 有 点 见长 ， 但 我 们 可 以 
利用 JavaScript 语 言 把 它 改 写 得 简明 一 些 。this 可 以 用 来 代表 任何 一 种 
当前 元 素 ， 所 以 可 以 用 this 和 getAttribute( ) 方法 提取 出 href 
属性 的 值 ， 如 下 所 示 : 


<a href="http://www.example.com/" 
=» ONclick="popUp(this.getAttribute('href'); return 


false;">Example</a> 


老实 说 ， 上 面 这 条 语句 没有 精简 多 少 。 当 前 链接 的 href 属性 还 有 一 个 
更 简明 的 引用 办 法 一 一 使 用 由 DOM 提 供 的 this .href 属性 : 


<a href="http://www.example.com/" 


学 onclick="popUp(this,href); return false;">Example</a> 


不 管 采用 哪 种 方法 ， 重 要 的 是 href 属性 现在 已 经 有 了 合法 的 值 。 与 
href = "javascript:..." 或 href = "#" 相 比 ， 这儿 种 变 体 的 
效果 要 好 得 多 。 


所 以 ， 在 把 href 属性 设置 为 真实 存在 的 URL 地 址 后 ， 即 使 JavaScript 已 
被 禁用 (或 遇 到 了 搜索 机 ) ， 这 个 链接 也 是 可 用 的 。 虽 然 这 个 链接 在 
功能 上 打 了 点 儿 折 扣 (因为 它 没 有 打开 一 个 新 窗口 ， 但 它 并 没有 彻 
底 失 效 。 这 是 一 个 经 典 的 “平稳 退化 ”的 例子 。 


在 本 书 此 前 介绍 的 所 有 技巧 当中 ， 这 个 技巧 是 最 有 用 的 ， 但 它 还 有 改 
进 的 余地 。 这 个 技巧 最 明显 的 不 足 是 ， 每 当 需 要 打开 新 窗口 时 ， 就 不 
得 不 把 一 些 JavaScript 代 码 和 入 标记 文档 中 。 如 果 能 把 包括 事件 处 理 画 
数 三 内 的 所 有 JavaScript 代 码 全 都 放 在 外 部 文件 里 ， 这 个 技巧 将 更 加 完 


5.3 ”向 CSS 学 习 


此 前 ， 我 曾 以 JavaScript 和 Flash 为 例 ， 对 技术 会 因为 在 诞生 初期 被 人 们 
人 。 我 们 可 以 从 过 去 的 失误 里 学 
| 纪 沙 和 


不 过 ， 还 有 一 些 技 术 是 从 一 开始 殊 彼 人们 小 心 谍 慎 地 使 用 着 的 。 我 们 
可 以 从 它们 那里 学 到 更 多 的 东西 。 


5.3.1 结构 与 样式 的 分 离 
CSS ( 层 车 样式 表 ) 是 一 项 了 不 起 的 技术 。CSS 可 以 让 人 们 对 网 站 设计 


工作 中 的 各 个 方面 做 出 严格 细致 的 控制 。 表 面 上 看 ，CSS 技 术 并 无 新 内 
容 ，CSS 能 做 到 的 用 <table> 和 <font> 等 标签 也 可 以 做 到 。CSS 技 术 


的 最 大 优点 是 ， 它 能 够 帮助 你 将 Web 文 档 的 内 容 结构 (标记 ) 和 版 面 设 
计 (样式 ) 分 离开 来 。 


我 们 经 闻 会 遇 到 一 些 几乎 每 个 元 素 都 市 有 style 属性 的 Web 文 档 ， 而 
这 是 CSS 技 术 最 缺乏 效率 的 用 法 之 一 。 真 正 能 从 CSS 技 术 获 蔡 的 方法 ， 
是 把 样式 全 部 转移 到 外 部 文件 中 去 。 


与 JavaScript 和 Flash 相 比 ，CSS 的 “出 生 ” 日 期 要 晚 得 多 。 或 许 是 已 经 从 
利用 JavaScript 和 和 Flash 时 后 果 中 吸取 了 教训 的 缘故 ， 网 页 设计 人 员 一 开 
台 使 用 CSS 时 残 采 用 了 一 种 深思 熟 虑 、 渐 进 增强 的 态度 。 


把 文档 的 结构 和 样式 分 为 两 部 分 的 CSS 技 术 给 每 个 人 都 带 来 了 方便 。 如 
果 你 的 工作 是 编写 文档 的 内 容 ， 现 在 只 要 集中 精力 把 文档 的 内 容 正 确 
地 标记 出 来 就 行 了 ， 用 不 着 再 与 充斥 着 <table> 和 <font> 等 标签 的 
模板 打交道 ， 也 就 用 不 着 再 担心 会 把 文档 的 版 面 设 计 卉 得 一 团 糟 。 如 
果 你 的 工作 是 设计 网 页 的 版 面 ， 现 在 只 要 集中 精力 把 诸如 颜色 、 字 体 
和 位 置 等 在 一 些 外 部 文件 里 设置 妥当 就 行 了 ， 而 无 需 再 接触 文档 ， 最 
多 只 需要 添加 些 类 或 是 id 属性 。 


作为 CSS 技 术 的 突出 优点 ， 文 档 结构 与 文档 样式 的 分 离 可 以 确 你 网 页 都 
能 平稳 退化 。 具 备 CSS 文 持 的 浏览 器 固然 可 以 把 网 页 呈现 得 美 仑 美 负 ， 
0 了 CSS 功 能 的 浏览 圳 同样 可 以 把 网 页 的 内 容 按照 正确 的 结 
勺 证 泵 四 处 。 


按 这 种 原则 使 用 JavaScript 上 时， 我们 可 以 从 CSS 映 上 借鉴 到 很 多 东西 。 
5.3.2 ”渐进 增强 


在 网 页 设计 人 员 当 中 流传 着 这 样 一 句 格 言 :“ 内 容 就 是 一 切 ”。 如 采 没 
有 内 容 ， 创 建 网 站 还 有 何 用 ? 


话 虽 如 此 ， 也 不 能 简单 地 把 原始 内 容 发 布 到 了 网上， 而 不 加 任何 描述 。 
内 容 需 要 用 HTML 或 XHTML 之 类 的 标记 语言 来 描述 。 在 创建 网 站 的 时 
候 ， 给 内 容 加 上 正确 的 HTML 标 记 是 第 一 个 步 又， 或许 也 是 最 重要 的 步 
又 。 我 们 可 以 修正 那 名 格言 为 “标记 恨 好 的 内 容 就 是 一 切 ”。 


只 有 正确 地 使 用 标记 语言 才能 对 内 容 做 出 准确 的 摘 述 。 各 种 标记 负责 
提供 诸如 “这 是 列表 项 ”`“ 这 是 文本 段落 ?之 类 的 信息 。 如 果 不 使 用 


<1i>、<p> 之 类 的 标签， 我 们 融 很 难 把 它们 区 分 开 来 。 


在 给 内 容 加 上 各 种 标记 后 ， 束 可 以 使 用 各 种 Css 指令 控制 内 容 的 显示 效 
朱 。CSS 指 令 构成 了 一 个 表示 层 。 这 个 表示 层 束 像 羡 一 张 透明 的 彩色 薄 
膜 ， 可 以 包 囊 到 文档 的 结构 上 ， 使 文档 的 内 容 呈 现 出 各 种 色彩 。 但 即 
人 文档 的 内 容 也 依然 可 以 访问 (只 是 缺乏 色彩 而 

已 o 


所 谓 “ 渐 进 增强 " 束 生 用 一 些 额 外 的 信息 层 去 包 右 原始 数据 。 按 照 “ 渐 进 
(如 果 不 是 “全 部 ”的 话 ) 都 符合 “平稳 退 
”原则 。 


类 似 于 CSS，JavaScript 和 和 DOM 提供 的 所 有 功能 也 应 该 构成 一 个 额外 的 
指令 层 。CSS 代 码 负 责 提 供 关 于 “表示 ”的 信息 ，JavaScript 代 码 负 责 提 供 
关于 “行为 ”的 信息 。 行 为 层 的 应 用 方式 与 表示 层 一 样 。 


要 想 获 得 最 佳 的 “表示 ”效果 ， 就 应 该 把 CSS 代 码 从 HTML 文 档 里 分 离 出 
来 放 在 一 些 外 部 文件 里 。 像 下 面 这 样 把 CSS 代 码 混杂 在 HTML 文档 里 也 
不 是 不 可 以 ， 但 这 种 做 法 葬 大 于 利 : 


<p style="font-weight: bold; color: red;"> 


Be careful! 
</p> 


更 值得 推荐 的 办 法 是 ， 先 把 样式 信息 存 入 一 个 外 部 文件 ， 再 在 文档 的 
head 部 分 用 <link> 标签 来 调用 这 个 文件 : 


.Warning { 
font-weight: bold; 


color: red; 


class 属性 是 样式 与 文档 内 容 之 间 的 联结 纽 市 : 


<p class="warning"> 
Be careful! 


</p> 


这 显然 更 容易 阅读 和 理解 ， 而 且 样 式 信息 也 更 容易 修改 了 。 例 如 ， 假 
设 你 在 100 个 文档 里 使 用 了 warning 类 来 排版 各 种 警告 信息 ， 而 现在 
想 统一 改变 那些 均 告 信息 的 显示 效 末 ， 比 如 把 它们 的 颜色 都 从 红色 改 
为 蓝 色 。 那 么 ， 如 果 你 已 经 把 它们 的 表示 层 和 结构 分 开 了 ， 束 可 以 很 
容易 地 修改 样式 了 。 


.Warning { 
font-weight: bold; 
color: blue; 


} 


如 琳 把 这 个 样式 混杂 在 那 100 个 文档 里 ， 则 不 得 不 进行 大 量 的 “搜索 并 
蕉 换 ” 操 作 。 


显然 ， 把 CSS 代 码 从 HTML 文 档 里 分 离 出 来 可 以 让 CSS 工 作 得 最 好 。 这 
个 适用 于 CSS 表 示 层 的 结论 同样 适用 于 JavaScript 行 为 层 。 


5.4 分离 JavaScript 


你 此 前 见 到 的 JavaScript 代 码 都 已 经 与 HTML 文 档 分 得 很 开 了 。 人 负责 实 
际 完 成 各 项 任务 的 JavaScript 函 数 都 已 存 入 外 部 文件 ， 问 题 出 现在 内 拟 
的 事件 处 理 函 数 中 。 


类 似 于 使 用 style 属性 ， 在 HTML 文 档 里 使 用 诸如 onclick 之 类 的 属 
性 也 是 一 种 既 没 有 效率 又 容易 引发 问题 的 做 法 。 如 来 我 们 用 一 个 “ 挂 
钧 "”， 就 像 CSS 机 制 中 的 cLlass 或 id 属性 那样 ， 把 JavaScript 代 码 调 用 
行为 与 HTML 文 档 的 结构 和 内 容 分 离开 ， 网 页 束 会 健壮 得 多 。 那 么 ， 可 
否 用 下 面 这 条 语句 来 表明 “ 当 这 个 链接 被 点 击 时 ， 它 将 调用 popUp ( ) 
函数 "的 意思 呢 ? 


<a href="http://www.example.com/" class="popup">Example</a> 


我 很 高 兴 告 诉 大 家 : 完全 可 以 这 样 做 。JavaScript 语 言 不 要 求 事件 必须 
在 HTML 文 档 里 处 理 ， 我 们 可 以 在 外 部 JavaScript 文 件 里 把 一 个 事件 添 
加 到 HTML 文 档 中 的 某 个 元 素 上 : 


element .event = action... 


关键 是 怎样 才能 把 应 该 获得 这 个 事件 的 元 素 确定 下 来 。 这 个 问题 可 以 
利用 class 或 id 属性 来 解决 。 


如 有 果 想 把 一 个 事件 添加 到 某 个 带 有 特定 id 属性 的 元 素 上 ， 用 
getElementById 就 可 以 解决 问题 : 


getElementById(id).event = action 


如 采 事 情 涉 及 多 个 元 隶 ， 我 们 可 以 用 getELementsByTagName 和 
getAttribute 把 事件 添加 到 有 着 特定 属性 的 一 组 元 素 上 。 


具体 步骤 如 下 所 示 。 
(1) 把 文档 里 的 所 有 链接 全 放 入 一 个 数组 里 。 
(2) 遍历 数组 。 


(3) 如 果 某 个 链接 的 class 属性 等 于 popup ， 束 表示 这 个 链接 在 被 点 
击 时 应 该 调用 popUp( ) 函数 。 于 是 ， 


A. 把 这 个 链接 的 href 属性 值 传递 给 popUp( ) 函数 ; 


B. 取消 这 个 链接 的 默认 行为 ， 不 让 这 个 链接 把 访问 者 带 离 当前 窗口 。 
下 面 是 实现 上 述 步 骤 的 JavaScript 代 码 ; 


var links = document.getElementsByTagName("a"); 
for (var i=0; i<links.length; i++) { 
if (links[i].getAttribute("class") == "popup") { 


links[i].onclick = function() { 
popUp(this.getAttribute("href")); 
return false; 


以 上 代码 将 把 调用 popUp( ) 函数 的 onclick 事件 添加 到 有 关 的 链接 
上 。 只 要 把 它们 存 入 一 个 外 部 JavaScript 文 件 ， 束 等 于 是 把 这 些 操作 从 
HTML 文 档 里 分 离 出 来 了 。 而 这 束 是 “分 离 JavaScript” 的 含义 。 


还 有 个 问题 需要 解决 : 如果 把 这 段 代码 存 入 外 部 JavaScript 文 件 ， 它 们 
将 无 法 正常 运行 。 因 为 这 段 代码 的 第 一 行 是 : 


var links = document.getElementsByTagName("a"); 


这 条 语句 将 在 JavaScript 文 件 被 加 载 时 立刻 执行 。 如 果 JavaScript 文 件 是 
从 HTML 文 档 的 <head> 部 分 用 <script> 标签 调用 的 ， 它 将 在 HTML 
文档 之 前 加 载 到 浏览 器 里 。 同 样 ， 如 果 <script> 标签 位 于 文档 底部 
</body> 之 前 ， 就 不 能 保证 哪个 文件 最 先 结束 加 载 (浏览 器 可 能 一 次 
加 载 多 个 ) 。 因 为 脚本 加 载 时 文档 可 能 不 完整 ， 所 以 模型 也 不 完整 。 
没有 完整 的 DOM，getElementsByTagName 等 方法 就 不 能 正常 工 
作 。 


必须 让 这 些 代码 在 HTML 文 档 全 部 加 载 到 浏览 器 之 后 马上 开始 执行 。 还 
好 ，HTML 文 档 全 部 加 载 完毕 时 将 触发 一 个 事件 ， 这 个 事件 有 它 自 己 的 
事件 处 理 函 数 。 


文档 将 被 加 载 到 一 个 浏览 器 窗口 里 ，document 对 象 又 是 window 对 
象 的 一 个 属性 。 当 window 对 象 触发 onload 事件 时 ，document 对 象 
已 经 存在 。 


我 将 把 我 的 JavaScript 代 码 打包 在 prepareLinks 函数 里 ， 并 把 这 个 画 
数 添 加 到 window 对 象 的 onload 事件 上 去 。 这 样 一 来 ，DOM 了 就 可 以 
正常 王 作 了 了; 


window.onload = prepareLinks,; 
function prepareLinks() { 
var links = document.getElementsByTagName("a"); 
for (var i=0; i<links.length; I++) { 
if (links[i].getAttribute("class") == "popup") { 
links[i].onclick = function() 


popUp(this.getAttribute("href")); 
return false; 


别 息 记 把 popUp 函数 也 保存 到 那个 外 部 JavaScript 文 件 里 去 : 


function popUp(winURL) { 
window.open(winURL, "popup", "width=320, height=480"); 


} 


这 征 一 个 非常 简单 的 例子 ， 但 它 演示 了 怎样 才能 成 功 地 把 行为 与 结构 
分 离开 来 。 在 第 6 章 ， 我 还 会 介绍 几 种 可 以 在 文档 加 载 时 把 事件 添加 到 
元 素 上 去 的 巧妙 办 法 。 


5.5” 癌 后 兼容 


正如 前 面 反复 强调 的 那样 ， 你 的 网 站 的 访问 者 很 可 能 未 局 用 JavaScript 
功能 。 此 外 ， 不 同 的 浏览 器 对 JavaScript 的 支持 程度 也 不 一 样 。 绝 大 多 
数 浏览 器 都 能 或 多 或 少 地 支持 JavaScript， 而 绝 大 多 数 现代 的 浏览 器 对 
DOM 的 支持 都 非常 不 错 。 但 比较 古老 的 浏览 颖 却 很 可 能 无 法 理解 DOM 
提供 的 方法 和 属性 。 因 此 ， 即 使 某 位 用 户 在 访问 你 的 网 站 时 使 用 的 是 
支持 JavaScript 的 浏览 器 ， 某 些 脚 本 也 不 一 定 能 正常 工作 。 


5.5.1 ”对象 检测 


针对 这 一 问题 的 最 简单 的 解决 方案 是 ， 检 测 浏览 器 对 JavaScript 的 支持 
程度 。 这 有 点 儿 像 游乐 园 里 的 警告 牌 ; “你 必须 达到 这 一 身高 才能 参与 


这 项 游乐 活动 ”。 换 句 话说 ， 需要 在 DOM 脚 本 里 表达 出 下 面 这 个 合 
义 : “你 必须 理解 这 么 多 的 JavaScript 语 言 才能 执行 这 些 语句 ”。 


这 个 解决 方案 很 容易 实现 : 只 要 把 菜 个 方法 打包 在 一 个 if 语句 里 ， 职 
可 以 根据 这 条 if 语句 的 条 件 表达 式 的 求 值 结果 是 true (这 个 方法 存 
在 ) 还 是 false (这 个 方法 不 存在 ) 来 决定 应 该 采取 怎样 的 行动 。 这 
种 检测 称 为 对 象 检测 (object detection) 。 第 2 章 介绍 过 ， 几 乎 所 有 的 
东西 (包括 各 种 方法 在 内 ) 都 可 以 被 当做 对 象 来 对 待 ， 而 这 意味 着 我 
们 可 以 容易 地 把 不 支持 某 个 特定 DOM 方 法 的 浏 贤 器 检测 出 来 : 


if (method) { 


statements 


例如 ， 如 果 有 一 个 使 用 了 getElementById( ) 方法 的 函数 ， 就 可 以 在 
调用 getElementById( ) 方法 之 前 和 完 检查 用 户 所 使 用 的 浏 咒 絮 是 否 文 
持 这 个 方法 。 在 使 用 对 象 检测 时 ， 一 定 要 删 掉 方法 名 后 面 的 圆 括号 ， 

如 果 不 删 挥 ， 测 试 的 将 是 方法 的 结果 ， 无 论 方法 是 否 存 在 。 


function myFunction() { 
if (document.getElementById) { 
statements using getElementById 


因此 ， 如 果 某 个 浏览 器 不 支持 getElementById( ) 方法 ， 它 就 永远 也 
` 会 执行 使 用 此 方法 的 语句 。 


这 个 解决 方案 的 唯一 不 足 是 ， 如 此 编写 出 来 的 函数 会 增加 一 对 人 花 括 


号 。 如 果 需 要 在 函数 里 检测 多 个 DOM 方 法 和 /或 属性 是 否 存 在 ， 这 个 画 
数 中 最 重要 的 语句 融会 被 深 埋 在 一 层 又 一 层 的 花 括 号 里 。 而 这 样 的 代 
码 往往 很 难 阅读 和 理解 。 


把 测试 条 件 改 为 “如 果 你 不 理解 这 个 方法 ， 请 离开 ” 则 更 简单。 


为 了 把 测试 条 件 从 “如 果 你 理解 .…...” 改 为 “如 果 你 不 理解 .…...”"， 需 要 使 
用 “逻辑 非 ” 操 作答 ， 这 个 操作 符 在 JavaScript 语 言 里 表示 为 一 个 慰 叹 


3 二 


If (!method ) 


测试 条 件 中 的 “...... 请 离开 ”可 以 用 一 条 return 语句 来 实现 。 因 为 这 相 
当 于 中 途 退 出 函数 ， 所 以 让 它 返 回 布尔 值 false 比较 贴切 。 用 来 测试 
getElementById 是 否 存在 的 语句 如 下 所 示 : 


if (!document .getElementById) { 
return false; 


因为 花 括 号 部 分 只 有 return false 一 条 语句 ， 我 们 可 以 把 它 简写 成 
人 


if (!document.getElementById) return false; 


如 采 需 要 测试 多 个 方法 或 属性 是 否 存在 ， 可 以 用 “逻辑 或 ?操作 符 将 其 
合并 ， 这 个 操作 符 在 JavaScript 语 言 里 表示 为 两 个 竖 线 符号 。 如 下 所 
人 小 : 


if (!document.getElementById || !'document.getElementsByTagName) 


return false; 


如 果 这 是 游乐 园 里 的 一 块 警告 牌 的 话 ， 它 的 意思 是 “如 果 你 不 理解 
getElementById 和 getElementsByTagName ， 你 就 不 能 参与 这 
项 游乐 活动 ”。 


现在 ， 我 将 按照 这 一 思路 ， 在 用 来 把 onclick 事件 添加 到 链接 上 去 的 
网 页 加 载 脚 本 里 插入 一 条 if 语句 。 那 个 脚本 里 使 用 了 


getElementsByTagName ， 所 以 需要 插入 一 条 if 语句 去 检查 浏览 器 
是 否 理解 这 个 方法 : 


window.onload = function() { 
if (!document.getElementsByTagName) return false; 
var lnks = document.getElementsByTagName("a"); 
for (var i=0; i<lnks.length; i++) { 
if (lnks[i].getAttribute("class") == "popup") { 
lnks[i].onclick = function() { 


popUp(this.getAttribute("href")); 
return false,; 


虽然 只 是 一 条 简单 的 if 语句 ， 但 它 可 以 确保 那些 “十 老 的 ”浏览 器 不 会 
因为 我 的 脚本 代码 而 出 问题 。 这 么 做 是 为 了 让 脚本 有 民 好 的 疝 后 兼容 
性 。 因 为 我 在 给 网 页 添加 各 有 关 行 为 时 始终 加 循 了 “渐进 增强 ”的 原 
则 ， 所 以 可 以 确切 地 知道 我 添加 的 那些 都 能 平稳 退化 ， 我 的 网 页 在 那 
些 “ 汪 老 的 ”浏览 器 里 也 能 正 第 浏览 。 那 些 只 支持 一 部 分 JavaScript 功 能 
但 不 支持 DOM 的 浏 咒 絮 仍 可 以 访问 我 的 网 页 的 内 容 。 


5.5.2 ”浏览 器 噢 探 技 术 


在 JavaScript 脚 本 代码 里 ， 在 使 用 某 个 特定 的 方法 或 属性 之 前 ， 先 测试 
它 是 否 真 实 存 在 是 确保 向 后 兼容 性 最 安全 和 最 可 信 的 办 法 ， 但 它 并 不 
是 唯一 的 办 法 。 在 浏览 需 市 场 群雄 逐鹿 的 那个 年 代 ， 一 种 称 为 浏览 器 
嗅 探 ” (browser sniffing) 的 技术 曾经 非常 流行 。 


“ 浏 唤 絮 咒 探 ” 指 通 过 提取 浏 唤 絮 供 应 两 提供 的 信息 来 解决 同 后 兼容 问 
题 。 从 理论 上 讲 ， 可 以 通过 JavaScript 代 码 检 索 天 于 浏览 絮 品 牌 和 版 本 
的 信息 ， 这 些 信息 可 以 用 来 改善 JavaScript 脚 本 代码 的 向 后 兼容 性 ， 但 
这 是 一 种 风险 非常 大 的 技术 。 


首先， 浏览 右 有 时 会 “ 撒 谤 ”。 因 为 历史 原因 ， 有 至 浏 虎 亏 会 把 目 己 报 
告 为 男 外 一 种 浏览 器 ， 还 有 一 些 浏览 器 允许 用 户 任意 修改 这 些 信 息 。 


其 次 ， 为 了 适用 于 多 种 不 同 的 浏 虎 郁 ， 浏 览 硕 距 探 脚本 会 变 得 越 来 越 
复杂 。 如 末 想 让 浏览 右 咒 探 脚 本 能 够 跨 平台 工作 ， 束 必须 测试 所 有 可 
能 出 现 的 供应 丙 和 版 本 号 组 合 。 这 是 一 个 无 穷尽 的 任务 ， 测 试 的 组 合 
情况 越 多 ， 代 码 束 越 复 洒 和 见长 。 

最 后 ， 许 多 浏览 俗 别 探 脚本 在 进行 这 类 测试 时 要 求 浏览 种 的 版 本 号 必 
人 
这 些 及 3 


令 人 感到 欣慰 的 是 ， 充 满 着 风险 的 浏览 器 嗅 探 技术 正在 被 更 简单 也 更 
健壮 的 对 象 检测 技术 所 取代 。 


5.6 ”性 能 考虑 


很 多 人 都 会 忽视 脚本 对 Web 应 用 整体 性 能 的 影响 。 为 保证 应 用 流畅 地 运 
行 ， 在 为 文档 编写 和 应 用 脚本 时 ， 需 要 注意 一 些 问题 。 


5.6.1 尽量 少 访问 DOM 和 尽量 减少 标记 
访问 DOM 的 方式 对 脚本 性 能 会 产生 非常 大 的 影响 。 以 下 面 代 码 为 例 : 


if (document.getElementsByTagName("a").length > 0) { 
var links = document.getElementsByTagName("a"); 
for (var i=0; i<links.length; i++) { 
// 对 每 个 链接 做 点 处 理 
} 


} 


搞 清 楚 这 上 段 代 码 要 干什么 ， 目 然 束 会 明日 问题 在 哪里 了 。 前 和 完 ， 它 取 
得 了 所 有 <a> 元 素 ， 然 后 检查 它们 的 个 数 是 不 是 大 于 0: 


if (document.getElementsByTagName("a").length > 0) { 


然后 ， 如 果 大 于 0， 它 会 再 次 取得 所 有 <a> 元 素 ， 循 环 过 历 这 些 元 素 并 
应 用 某 些 操作 : 


var links = document.getElementsByTagName("a"); 


for (var i=0; i<links.length; i++ 


虽然 这 段 代码 可 以 运行 ， 但 它 不 能 保持 最 优 的 性 能 。 不 管 什么 时 候 ， 

只 要 是 查询 DOM 中 的 某 些 元 素 ， 浏 览 需 都 会 搜索 整个 DOM 树 ， 从 中 得 
找 可 能 匹配 的 元 素 。 这 上 段 代 码 居 然 使 用 了 两 次 
getElementsByTagName 方法 去 执行 相同 的 操作 ， 浪 费 了 一 次 搜 
索 。 更 好 的 办 法 是 把 第 一 次 搜索 的 结果 保存 在 一 个 变量 中 ， 然 后 在 循 
环 里 重用 该 结果 ， 比 如 : 


var links = document.getElementsByTagName("a"); 
if (links.length > 0) { 
for (var i=0; i<links.length; i++) { 


// 对 每 个 链接 做 点 处 理 


这 样 一 来 代码 功能 没有 变 ， 但 搜索 DOM 的 次 数 由 两 次 降低 到 了 一 
yi o 


前 面 例子 中 的 问题 还 比较 容易 发 现 。 要 是 你 有 多 个 函数 重复 做 同一 件 

事 ， 仆 怕 就 不 太 好 发 现 了 。 比 如 ， 要 是 有 一 个 函数 检查 每 个 链接 中 的 

popup 类 ， 而 男 外 一 个 函数 检查 每 个 链接 中 的 hover 类 ， 那 么 同样 也 
会 造成 搜索 浪费 。 在 多 个 函数 都 会 取得 一 组 类 似 元 素 的 情况 下 ， 可 以 

考虑 重 构 代 码 ， 把 搜索 结果 保存 在 一 个 全 局 变量 里 ， 或 者 把 一 组 元 素 

直接 以 参数 形式 传递 给 函数 。 


另 一 个 需要 注意 的 地 方 ， 就 是 要 尽量 减少 文档 中 的 标记 数量 。 过 多 不 
必要 的 元 素 只 会 增加 DOM 树 的 规模 ， 进 而 增加 过 历 DOM 树 以 查找 特定 
元 素 的 时 间 。 

5.6.2 ”合并 和 放置 脚本 


本 书 中 的 多 数 示例 都 使 用 外 部 脚本 文件 ， 在 文档 中 通过 <script> 元 
素 把 它们 包含 进来 ， 如 下 所 示 : 


<script src="script/function.js"></script> 


包含 脚本 的 最 佳 方式 号 是 使 用 外 部 文件 ， 因 为 外 部 文件 与 标记 能 清晰 
地 分 离开 ， 而 且 浏 锅 卓 也 能 对 站 后 中 的 多 个 页 面 重用 缓存 过 的 相同 脚 
本 。 不 过 ， 类 似 下 面 这 种 情况 ， 最 好 也 不 要 出 现 : 


src="script/functionA.js"></script> 
src="script/functionB.js"></script> 


src="script/functionC.js"></script> 
src="script/functionD.js"></script> 


推荐 的 做 法 是 把 functionA.js 、functionB.js、 
functionc,js 和 functionD.js 合并 到 一 个 脚本 文件 中 。 这 样 ， 
瓯 可 以 减少 加 载 页 面 时 发 送 的 请 求 数量 。 而 减少 请 求 数量 通 币 都 是 在 
性 能 优化 时 百 移 要 考虑 的 。 


脚本 在 标记 中 的 位 置 对 页 面 的 初次 加 载 时 间 也 有 很 大 影响 。 传 统 上 ， 
我 们 都 把 脚本 放 在 文档 的 <head> 区 域 ， 这 种 放置 方法 有 一 个 问题 。 位 
于 <head> 块 中 的 脚本 会 导致 浏览 器 无 法 并 行 加 载 其 他 文件 (如 图 像 或 
其 他 脚本 ) 。 一 般 来 说 ， 根 据 HTTP 规 范 ， 浏 览 器 每 次 从 同一 个 域名 中 
最 多 只 能 同时 下 载 两 个 文件 。 而 在 下 载 脚本 期 间 ， 浏 览 器 不 会 下 载 其 
他 任何 文件 ， 即 使 是 来 自 不 同 域名 的 文件 也 不 会 下 载 ， 所 有 其 他 资源 
都 要 等 脚本 加 载 完 毕 后 才能 下 载 。 


按照 本 章 前 面 讨论 的 渐进 增强 和 分 离 JavaScript 观 点 ， 把 <script> 标 
签 放 到 别 的 地 方 并 不 是 问题 。 把 所 有 <script> 标签 都 放 到 文档 的 末 
尾 ，</body> 标记 之 前 ， 殊 可 以 让 页 面 变 得 更 快 。 即 使 这 样 ， 在 加 载 
， ，window 对 象 的 Load 事件 依然 可 以 执行 对 文档 进行 的 各 种 操 


5.6.3 ”压缩 脚本 


在 写 完 了 脚本 ， 做 了 优化 ， 而 且 也 将 它 放 到 文档 中 的 适当 位 置 之 后 ， 
还 有 一 件 事 可 以 加 快 加载 速 度 : 压缩 脚本 文件 。 


所 谓 压 缩 脚本 ， 指 的 十 把 脚本 文件 中 不 必要 的 子 市 ， 如 空格 和 注释 ， 
统统 删除 ， 从 而 达到 “压缩 ”文件 的 目的 。 好 在 ， 有 很 多 工具 都 可 以 蔡 
你 来 做 这 件 事 。 有 的 精简 程序 甚至 会 重 写 你 的 部 分 代码 ， 使 用 更 短 的 
变量 名 ， 从 而 减少 整体 文件 大 小 。 


比如 ， 假 设 你 有 如 下 代码 : 


function showPic(whichpic) { 
// 取得 图 片 的 href 属性 
var source = whichpic.getAttribute("href"); 
// 取得 占 位 符 
var placeholder = document.getElementById("placeholder"); 


// 更 新 占 位 符 

placeholder.setAttribute("src", source); 

// 使 用 图 像 的 title 属性 更 新 文本 描述 

Var text = whichpic.getAttribute("title"); 

var description = document.getElementById("description"); 


压缩 之 后 的 代码 束 会 变 成 下 面 这 样 : 


function showpPic(a){var b=a.getAttribute("href");document.get 
=wElementById("placeholder").setAttribute("src",b);a.getAttribute 


=-» ("title");document.getElementById("description")}; 


精简 后 的 代码 虽然 不 容易 看 履 ， 却 能 大 幅 减 少 文 件 大 小 。 多 数 情况 
下 ， 你 应 该 有 两 个 版 本 ， 一 个 十 工作 副本 ， 可 以 修改 代码 并 添加 注 
释 ; 另 一 个 是 精简 副本 ， 用 于 放 在 站 点 上 。 通 常 ， 为 了 与 非 精简 版 本 
区 分 开 ， 最 好 在 狂人 稍 副本 的 文件 名 中 加 上 min 字 样 : 


<script src="scripts/scriptName.min.js"></script> 


下 面 是 推荐 给 读者 的 几 个 有 代表 性 的 代码 压缩 工具 : 


。 Douglas Crockford 的 JSMin 
(http://www.crockford.com/javascript/jsmin.html ) ; 


。 雅虎 的 YUI Compressor (http://developer.yahoo.com/yui/compressor 
) ; 
。 谷歌 的 Closure Compiler (http://closure-compiler.appspot.com/home 


) 
这 些 工具 都 有 选项 ， 可 以 在 必要 时 用 来 最 大 程度 地 压缩 文件 。 


本 章 介绍 了 一 些 与 DOM 脚 本 编程 工作 有 关 的 概念 和 实践 ， 它 们 是 : 
平稳 退化 


。 分 离 JavaScript 
。 癌 后 兼容 
。 性 能 考虑 


在 学 习 和 使 用 Flash 和 CSS 等 其 他 一 些 技 术 时 获得 的 经 验 可 以 帮助 我 们 
A 才能 编写 出 高 品质 的 脚 


第 6 章 案例 研究 : 图 片 库 改进 版 


本 章 内 容 


。 把 事件 处 理 函 数 移出 文档 
。 回 后 兼容 
。 确保 可 访问 


在 第 4 章 里 ， 我 们 创建 了 一 个 JavaScript 图 片 库 。 在 第 5 章 里 ， 我 介绍 了 
a 3 00 
车 。 


“ 勤 于 思考 ”是 每 位 有 创新 精神 的 网 页 设计 人 员 都 应 该 具备 的 特质 。 无 
论 是 编写 CSS 脚 本 还 是 JavaScript 脚 本 ， 也 无 论 是 直接 编写 代码 还 是 使 


用 可 视 化 设计 工具 ， 一 名 优秀 的 网 页 设计 人 员 总 是 会 在 每 个 细 世 上 问 
目 己 这 样 一 个 问题 : “是 否 还 有 更 好 的 解决 办 法 ? ” 


正如 在 上 一 章 里 看 到 的 那样 ， 与 DOM 脚 本 编程 工作 有 关 的 问题 不 外 乎 


平稳 退化 、 向 后 兼容 和 分 离 JavaScript 这 几 大 类 。 这 些 问题 的 解决 方式 
和 解决 程度 影响 着 网 页 的 可 用 性 和 可 访问 性 。 


6.1 快速 回顾 


在 第 4 章 里 ， 我 仙 号 了 “1 放 米 车 纳 ， 占 位 符 ”* 图 片 的 src 属性 的 脚本 ， 
只 用 一 个 网 页 就 建立 起 了 图 片 库 。 这 有 征 最 终 完 成 的 函数 代码 清单 : 


function ShowPic(whichpic) { 
var Source = whichpic.getAttribute("href"),; 
Var placeholder = document .getElementById("placeholder"); 
placeholder .setAttribute("Src"， Source ) 


var text = whichpic.getAttribute("title"); 
var description = document.getElementById("description"); 
description.firstChild.nodeValue = text; 


下 面 是 用 来 调用 此 函数 的 HTML 片 段 : 


<ul> 


<1i> 
<a href="images/fireworks.jpg" onclick="showPic(this);return 
false; " title="A 
=™» fireworks display">Fireworks</a> 
</1i> 
<1i> 
<a href="images/coffee.jpg" onclick="showPic(this); return 
false; "title="A cup of 
=» black coffee">Coffee</a> 
</1i> 
<1i> 
<a href="images/rose.jpg" onclick="showPic(this); return false; 
"title="A red, red 
=» rose">Rose</a> 
</1i> 
<1i> 
<a href="images/bigben.jpg" onclick="showPic(this); return 


false; "title="The 
=-» famous clock">Big Ben</a> 
</1i> 
</U]> 
<p id="description">Choose an image.</p> 
<img id="placeholder" src="images/placeholder.gif" alt="my image 
gallery" /> 


现在 ， 为 改进 这 个 解决 方案 ， 我 们 要 提出 儿 个 问题 。 


6.2” 它 文 持平 稳 退 化 吗 
第 一 个 问题 是 : “如 果 JavaScript 功 能 说 禁用 ， 会 怎样 ?2 ” 
仔细 检查 过 代码 后 ， 我 得 出 的 结论 是 我 的 脚本 已 经 为 此 预 留 了 退路 : 


即使 JavaScript 功 能 已 被 蔡 用 ， 用 户 也 可 以 浏 咒 图 片 库 里 的 所 有 图 片 ， 
网 页 里 的 所 有 链接 也 都 可 以 正常 工作 : 


<1i> 
<a href="images/fireworks.jpg" onclick="showPic(this);return 
false;" title="A 


=™» fireworks display">Fireworks</a> 
</1i> 


在 没有 JavaScript“ 和 干扰 ”的 情况 下 ， 浏 哎 紫 将 沿 看 href 属性 给 出 的 链接 
前 进 ， 用 户 将 看 到 一 张 新 图 片 而 不 是 “该 页 无 法 显示 ”之 类 的 出 错 信 
轧 。 虽 说 用 户 体验 比 用 JavaScript 的 效果 要 略 莽 一些， 但 网 页 的 基本 功 
能 并 未 受到 损害 一 -页面 上 的 所 有 内 容 都 可 以 访问 。 


如 果 我 当初 选用 的 是 *javascript:” 伪 协议 ， 链 接 将 如 下 所 示 : 


<1i> 
<a href="javascript:showPpic(' images/coffee.jpg'); return 
false;"title="A cup of 


= black coffee">Coffee</a> 
</1i> 


如 和 我 把 这 些 链接 都 写成 上 面 这 样 ， 它 们 在 不 文 持 或 苯 用 了 JavaScript 
功能 的 浏览 万 里 将 翅 无 用 处 。 


类 似 地 ， 把 这 些 链 接 写 成 人 #*? 记 号 也 会 导致 类 似 的 问题 ， 但 令 人 遗憾 的 
这 个 技巧 在 那些 利用 藤 贴 操作 “编写 ”的 JavaScript 代 码 里 相当 沼 
。 类似 于 使 用 “javascript:” 伪 协议 时 的 情况 ， 如 果 当 初 使 用 的 是 “#* 记 

， 那 些 没 有 局 用 JavaScript 功 能 的 用 户 也 将 无 法 正常 浏 咒 我 的 图 片 


许 中 汪 并 


<1i> 
<a href="#" onclick="showPic(' images/rose.jpg'); return 
false;"title="A red, red 


= rose">Rose</a> 
</1i> 


把 href 属性 设置 为 一 个 真实 存在 的 值 不 过 是 举 手 之 劳 ， 但 图 片 库 却 因 
此 能 够 平稳 退化 。 虽 说 没有 启用 JavaScript 功 能 的 用 户 需要 在 浏览 器 里 
人 
得 多 吧 。 


图 片 库 通 过 了 第 一 个 测试 。 


6.3 它 的 JavaScript 与 HTML 标 记 是 分 离 的 吗 
下 一 个 问题 与 在 标记 文档 里 调用 JavaSeript 代 码 的 方式 有 关 : 文档 的 结 
构 与 文档 的 行为 分 开 了 吗 ? 换 句 话说 ， 网 页 的 行为 层 (JavaScript) 是 
作用 于 其 结构 层 (HTML) 之 上 的 ， 还 是 两 种 代码 混杂 在 一 起 ? 
具体 到 图 片 库 这 个 例子 ， 答 案 当然 是 “它们 混杂 在 一 起 了 ”。 


当初 我 是 把 onclick 事件 处 理 画 数 和 直接 插入 到 标记 文档 里 的 ， 如 下 所 
修 \: 


<1i> 


<a href="images/bigben.jpg" onclick="showPic(this); return 
false;"title="The famous 
=-» Clock">Big Ben</a> 


</1i> 


理想 情况 下 ， 应 该 在 外 部 文件 里 完成 添加 onclick 事件 处 理 函 数 的 工 
作 ， 那 样 才能 让 标记 文档 没有 “杂质 *， 就 像 下 面 这 样 : 


<1i> 
<a href="images/bigben.jpg" title="The famous clock">Big Ben</a> 


</1i> 


把 JavaScript 代 码 移 出 HTML 文 档 不 十 难事 ， 但 为 了 让 浏 唤 絮 知道 页 面 
里 都 有 哪些 链接 有 看 不 一 样 的 行为 ， 我 必须 找到 一 种 “挂钩 "把 
JavaScript 代 码 与 HTML 文档 中 的 有 关 标 记 关 联 起 来 。 有 多 种 办 法 可 以 
让 我 达到 这 一 目的 。 


可 以 像 下 面 这 样 给 图 片 清单 里 的 每 个 链接 分 别 添加 一 个 如 下 所 示 的 
class 属性 : 


<1i> 

<a href="images/bigben.jpg" class="gallerypic" title="The famous 
clock">Big Ben</a> 
</1i> 


但 这 种 技术 不 够 理想 ， 这 与 给 它们 分 别 添加 事件 处 理 函 数 同样 麻烦 。 


图 片 清单 里 的 各 个 链接 有 一 个 共同 点 ， 它们 都 包含 在 同一 个 列表 清单 
元 素 里 。 给 整个 清单 设置 一 个 独一无二 的 ID 的 办 法 要 侧 单 得 多 : 


<ul id="imagegallery"> 
<1i> 
<a href="images/fireworks.jpg" title="A fireworks 
display">Fireworks</a> 
</1i> 
<1i> 
<a href="images/coffee.jpg" title="A cup of black 
coffee">Coffee</a> 
</1i> 
<1i> 
<a href="images/rose.jpg" title="A red, red rose">Rose</a> 


</1i> 
<1i> 
<a href="images/bigben.jpg" title="The famous clock">Big 


你 将 看 到 ， 虽 然 只 有 这 一 个 “挂钩 >， 但 对 JavaScript 来 说 已 经 足够 了 。 
6.3.1 ”添加 事件 处 理 函 数 


现在 ， 需 要 编写 一 个 简短 的 函数 把 有 关 操 作 关联 到 onclick 事件 上 。 
我 将 其 命名 为 prepareGallery。 


下 面 是 我 想 让 这 个 函数 完成 的 工作 。 


。 检 查 当 前 浏览 器 是 否 理 解 getElementsByTagName 。 
。 检 查 当 前 浏览 器 是 否 理解 getElementById 。 
。 检 查 当 前 网 页 是 否 存在 一 个 id 为 jmagegallery 的 元 素 。 
。 遍历 ijmagegallery 元 素 中 的 所 有 链接 。 
。 设置 onclick 事件 ， 让 它 在 有 天 链 接 被 点 击 时 完成 以 下 操作 : 
o 把 这 个 链接 作为 参数 传递 给 showPic 函数 
o 取消 链接 被 点 击 时 的 默认 行为 ， 不 让 浏览 器 打开 这 个 链接 。 


我 将 从 定义 prepareGallery 函数 开始 。 这 个 函数 不 需要 参数 ， 所 以 
在 这 个 函数 名 字 后 面 的 圆 括号 里 用 不 看 写 出 任何 东西 : 


function prepareGallery() { 


01. 检查 点 


我 想 做 的 第 一 件 事 是 检查 当前 浏览 器 是 否 理解 名 为 
getElementsByTagName 的 DOM 方 法 。 我 将 在 这 个 函数 里 使 用 
需要 保证 不 理解 这 个 方法 的 老 浏 贤 器 不 会 执行 这 个 函 


if (!document.getElementsByTagName) return false; 


这 条 if 语句 相当 于 这 样 一 句 话 : “如 果 
getElementsByTagName 未 定义 ， 请 现在 束 离 开 。” 理 解 这 个 
DOM 方 法 的 浏览 器 将 继续 执行 。 


现在 ， 对 名 为 getElementById 的 DOM 方 法 进行 同样 的 检查 ， 
因为 我 的 本 数 也 会 用 到 这 个 方法 : 


if (!document .getE1LementById) return false; 


可 以 把 这 两 项 检查 组 合 在 一 起 : “只 要 你 不 理解 这 两 个 方法 中 的 其 
中 一 个 ， 请 立刻 离开 ” 


if (!document.getElementsByTagName || 
Idocument .getElementById)return false; 


var supported = document.getElementsByTagName && 
document .getElementById; 
if ( !supported ) return; 


不 过 ， 上 面 这 样 的 代码 开始 变 得 比较 见长 并 难以 阅读 。 事 实 上 ， 

从 可 读 性 的 角度 看 ， 把 多 项 测试 写 在 同一 行 上 的 做 法 不 一 定 是 最 
好 的 主意 。 有 不 少 程序 员 喜 欢 像 下 面 这 样 把 return 语句 单独 写 在 
= 


if (!document.getElementsByTagName) 
return false; 


if (!document.getElementById) 
return false; 


如 有 果 你 也 喜欢 这 样 的 写法 ， 建 议 最 好 是 用 花 括 号 把 return 语句 括 
起 来 ， 如 下 所 示 : 


if (!document.getElementsByTagName) { 
return false; 


} 
if (!document.getElementById) { 
return false; 


这 或 许 是 最 清晰 、 最 具有 可 读 性 的 代码 书写 方式 。 


把 这 些 测试 写 在 同一 行 上 还 是 写成 好 儿 行 是 你 的 自由 ， 你 完全 可 
以 根据 自己 的 喜好 来 选择 。 

完成 这 两 项 具有 普遍 适用 性 的 测试 后 ， 我 还 安排 了 一 个 更 具 针对 
性 的 测试 。 我 正在 编写 的 这 个 函数 将 处 理 id 等 于 imagegallery 
的 那个 元 素 所 包含 的 链接 ， 假 如 这 个 元 素 并 不 存在 ， 我 的 这 个 画 
数 也 就 无 需 继 续 执行 了 。 


前 面 两 项 测试 一 样 ， 我 将 使 用 “逻辑 非 ” 操 作答 来 进行 这 一 测 
TEN: 


if (!document.getElementById("imagegallery")) return false; 


出 于 个 人 俑 好 ， 你 也 许 更 喜欢 下 面 这 样 的 写法 : 


if (!document.getElementById("imagegallery")) { 


return false; 


这 项 测试 是 一 个 预防 性 措施 。 现 在 我 知道 调用 这 个 JavaScript 函 数 
的 文档 里 有 一 个 id 属性 值 等 于 imagegallery 的 列表 清单 元 

素 ， 但 我 不 敢 确 定 这 在 将 来 会 不 会 发 生变 化 。 有 了 这 个 预防 性 措 
施 ， 即 使 以 后 我 决定 从 网 页 上 删 掉 图 片 库 ， 也 用 不 着 担心 这 个 网 


页 的 JavaScript 代 码 会 突然 出 错 。 把 HTML 文 档 的 内 容 与 JavaScript 
代码 所 实现 的 行为 分 离开 来 的 重要 性 由 此 可 见 一 班 。 作 为 一 条 原 
则 ， 如 果 想 用 JavaScript 给 某 个 网 页 添加 一 些 行为 ， 束 不 应 该 让 
JavaScript 代 人 码 对 这 个 网 页 的 结构 有 任何 依赖 。 


结构 化 程序 设计 备 还 


我 们 在 学 校 里 学 过 一 种 理论 ， 叫 结构 化 程序 设计 (structed 
programming) 。 其 中 有 这 样 一 条 原则 :函数 应 该 只 有 一 个 入 
口 和 一 个 出 口 。 


我 刚才 的 做 法 已 经 违背 了 这 一 原则 : 我 在 
prepareGallery() 函数 的 开头 部 分 使 用 了 多 条 return 
false 语句 ， 它 们 全 都 是 这 个 函数 的 出 口 。 根 据 结 构 化 程序 
设计 理论 ， 应 该 把 这 些 出 口 点 减少 到 一 个 。 


从 理论 上 讲 ， 我 很 赞同 这 项 原则 ; 但 在 实际 工作 中 ， 过 分 拘 
记 于 这 项 原则 往往 会 使 代码 变 得 非 肖 难以 阅读 。 如 果 为 了 避 
免 留 下 多 个 出 口 点 而 去 改写 那些 if 语句 的 话 ， 这 个 函数 的 核 
1 束 像 下 面 这 


function prepareGallery() { 
if (document.getElementsByTagName) { 
if (document.getElementById) { 
if (document.getElementById("imagegallery")) { 
statements go here... 


出 现在 函数 的 开头 部 分 ， 就 是 可 以 接受 的 。 


出 于 可 读 性 的 考虑 ， 我 把 那些 return false 语句 全 部 集中 到 
prepareGallery 的 开头 部 分 : 


function prepareGallery() { 
if (!document.getElementsByTagName) return false; 


if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery")) return false; 


必要 的 测试 和 检查 工作 束 绪 之 后 ， 我 现在 开始 写 事 件 处 理 范 数 的 
核心 功能 。 


. 变量 名 里 有 什么 


首先 ， 我 想 把 事情 弄 得 稍微 简单 些 ， 重复 多 次 地 敲 入 像 
document ,getElementById("image gallery") 这 么 长 的 
一 串 实 在 很 麻烦 ， 所 以 我 决定 创建 一 个 名 为 gallery 的 变量 来 简 
化 它 : 


var gallery = document .getElementById("imagegallery"); 


全 可 以 给 要 量 起 一 个 忆 外 的 名 字 。 我 之 所 以 选用 “gallery” 来 命 
古 因为 它 的 含义 就 是 图 片 库 。 选 择 一 些 有 意义 的 单词 来 命名 
可 以 让 代码 更 容易 阅读 和 理解 。 


注意 在 为 变量 命名 时 一 定 要 章 慎 从 事 。 有 些 单词 在 
JavaScript 语 言 里 有 特殊 的 含义 和 用 途 ， 这 些 统称 为 “保留 

字 ” 的 单词 不 能 用 人 变量 各。 另外 ， 现 有 Javascript 画 数 或 方法 
的 名 字 也 不 能 用 来 命名 变量 。 不 要 使 用 诸如 alert 、var 或 
庄 之 类 的 单词 作为 变 量 的 名 学 ° 


按照 计划 ， 需 要 遍历 ijmagegallery 元 素 中 的 所 有 链接 ， 我 会 用 
到 getElementsByTagName 。 利 用 刚刚 创建 的 gallery 变量 ， 
可 以 把 对 getElementsByTagName 的 调用 简单 地 写成 下 面 这 个 
样子 : 


gallery.getElementsByTagName("a") 


它 等 价 于 下 面 这 个 长 长 的 记号 : 


document .getElementById("imagegallery").getElementsByTagName(" 


a") 


现在 ， 我 想 把 事情 弄 得 更 简单 堂 。 我 决定 把 上 面 这 个 记号 所 代表 
的 数组 (更 准确 地 说 ， 是 一 个 节点 列表 ) 赋值 给 一 个 短 变量 ， 并 
将 该 变量 命名 为 ]inks : 


var links = gallery.getElementsByTagName("a"); 


下 面 是 prepareGallery 函数 目前 的 样子 : 


function prepareGallery() { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 


if (!document.getElementById("imagegallery")) return false; 
var gallery = document .getElementById("imagegallery"); 
var links = gallery.getElementsByTagName("a"); 


准备 工作 已 就 绕 。 我 已 经 安排 好 了 必要 的 检查 工作 ， 还 创建 了 几 


个 变量 。 


03. 遍历 


我 想 轴 历 处 理 1inks 数组 里 的 各 个 元 素 ， 可 以 用 一 个 for 循环 来 
完成 这 项 工作 。 


目 完 ， 把 计数 姻 的 初始 值 设 置 为 零 。 每 处 理 1inks 数组 里 的 一 个 
oe 这 个 计数 姻 束 增加 一 个 1。 下面 是 对 计数 姻 进 行 初 始 化 的 语 
口 ) : 


var i = 0; 


把 充当 循环 计数 需 的 变量 命名 为 “i 是 一 种 传统 做 法 。 字 母 尖 "在 这 
里 的 含义 是 “increment”( 弟 增 ) ， 许 多 程序 设计 语言 里 都 习惯 使 
用 “i> 作 为 递增 的 变量 的 和 名字。 


下 面 是 这 个 循环 的 控制 条 件 : 


i < links.length; 


上 面 这 个 表达 式 的 含义 是 ， 只 要 变量 i 的 值 小 于 links 数组 的 
length 属性 值 ， 这 个 for 人 循环 束 一 直 循环 下 去 。length 的 值 总 
是 等 于 Links 数组 里 的 元 素 总 个 数 。 因 此 ， 如 果 1Links 数组 包含 
4 个 元 素 ， 那 么 只 要 i 小 于 4， 我 的 for 循环 就 将 一 直 循 环 下 去 。 


最 后 ， 使 用 下 面 这 个 记号 来 给 循环 计数 紫 加 上 一 个 1: 


这 个 记号 是 下 面 这 条 语句 的 位 写 形式 : 


i = i+1; 


上 面 这 几 条 语句 的 效果 是 :这 个 for 循环 每 执行 一 次 ， 变 量 i 的 
值 就 会 加 1; 一 旦 变量 i 的 值 不 再 小 于 1inks .length ， 循 环 就 结 
束 。 因 此 ， 如 果 1Links 数组 包含 4 个 元 素 ， 这 个 循环 将 在 i 等 于 4 
时 结束 执行 。 这 个 循环 将 总 共 执 行 4 次 一 一 别 乐 了， 变量 芋 是 从 零 
开始 计数 的 。 


下 面 是 for 循环 的 开头 部 分 : 


for ( var i=0; i < links.length; I++) { 


04. 改变 行为 


具体 到 这 个 例子 ， 我 想 要 完成 的 操作 是 改变 links 数组 中 的 各 个 
元 素 的 行为 。 事实 上 ， 与 其 说 links 是 一 个 数组 ， 不 如 说 它 是 一 
个 节点 列表 (node list) 来 得 更 准确 。 它 是 一 个 由 DOM 节 点 构成 
的 集合 ， 这 个 集合 里 的 每 个 节点 剖 有 目 己 的 属性 和 方法 。 


我 最 感 兴趣 的 是 它 的 onclick 方法 ， 像 下 面 这 样 为 它 添加 一 个 行 
为 : 


links[i].onclick = function() { 


这 条 语句 定义 了 一 个 匿名 画 数 。 这 是 一 种 在 代码 执行 时 创建 丽 数 
的 办 法 。 具 体 到 上 面 这 条 语句 ， 它 把 Links[i] 元 素 的 onclick 
事件 处 理 画 数 指定 为 这 个 匿名 范 数 。 这 个 匿名 画 数 里 的 所 有 语句 
将 在 links[i] 元 素 所 对 应 的 链接 被 点 击 时 执行 。 


links[i] 元 素 的 值 会 随 独 变量 i 的 递增 而 变化 。 如 采 假 设 
links 集合 里 包 侣 4 个 元 素 ， 那 么 第 一 个 元 际 将 是 Links[0] ， 最 
后 一 个 元 素 是 links[3]。 


我 传递 给 showPic 函数 的 参数 是 天 键 字 this ， 它 代表 此 时 此 刻 
与 onclick 方法 相关 联 的 那个 元 素 。 也 束 是 说 ，this 在 这 里 代 
表 ]inks[i] ， 而 links[i] 又 对 应 着 Links 节点 列表 里 的 某 个 
特定 的 市 点 : 


showPic(this); 


我 还 需要 再 多 做 一 件 事 ， 即 禁用 有 关 链 接 的 默认 行为 。 如 采 
showPic( ) 函数 执行 成 功 ， 就 不 让 浏览 器 执行 某 个 链接 被 点 击 时 
的 委 认 操作 。 和 以 前 一 样 ， 我 想 取消 这 种 默认 行为 ， 不 让 浏览 天 
前 进 到 那个 链接 所 指 加 的 目的 地 : 


return false， 


返回 布尔 值 false 相当 于 同 浏 师 厚 传递 了 这 样 一 条 消 电 : “按照 这 
个 链接 没 被 点 击 的 情况 采取 行动 。” 


最 后 ， 还 需要 用 一 个 右 花 括号 来 结束 这 个 匿名 画 数 。 下 面 是 我 最 
终 完 成 的 匿名 画 数 ， 


links[i].onclick = function() { 
showPic( this); 


return false; 


} 


05. 完成 JavaScript 阔 数 
现在 ， 需 要 用 一 个 右 花 括号 来 结束 for 循环 : 


for ( var i=0; i < links.length; I++) { 
links[i].onclick = function() { 
showPic(this); 
return false; 
} 
} 


最 后 ， 再 用 一 个 右 花 括号 结束 prepareGallery 函数 。 下 面 是 这 
个 函数 完整 代码 清单 : 


function prepareGallery() { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery")) return false; 
var gallery = document .getElementById("imagegallery"); 
var links = gallery.getElementsByTagName("a"); 
for ( var i=0; i < links.length; i++) { 


links[i].onclick = function() { 
showPic(this); 
return false; 


调用 此 函数 ， 就 会 把 onclick 事件 绑 定 到 id 等 
于 “imagegallery” 的 元 素 内 的 各 个 链接 元 素 上 。 


注意 ”如果 想 了 解 JavaScript 的 其 他 信息 ， 可 以 参考 Aaron 
Gustafon 与 我 合 著 的 Advanced DOM Scripting: Dynamic Web 
Design Techniques (Apress, 2007) 。 


6.3.2 ”共享 onload 事件 
我 必须 执行 prepareGallery 函数 才能 对 onclick 事件 进行 绑 定 。 


如 果 马 上 执行 这 个 函数 ， 它 将 无 法 完成 其 工作 。 如 果 在 HTML 文 档 完 成 
加 载 之 前 执行 脚本 ， 此 时 DOM 有 是 不 完整 的 。 有 具体 到 prepareGallery 
函数 ， 它 的 第 3 行 代 码 将 测试 "imagegalLllery'" 元 素 是 否 存在 ， 如 果 
人 这 项 测试 的 准确 性 就 无 从 谈 起 ， 事 态 的 发 展 就 会 偏离 我 
计划 | 。 


应 该 让 这 个 函数 在 网 页 加 载 完 毕 之 后 立刻 执行 。 网 页 加 载 完毕 时 会 触 


发 一 个 onload 事件 ， 这 个 事件 与 window 对 象 相 关联 。 为 了 让 事态 的 
发 展 不 偏离 计划 ， 必 须 把 prepareGallery 函数 绑 定 到 这 个 事件 上 : 


window.onload = prepareGallery 


它 解 决 了 我 的 问题 ， 但 像 现 在 这 样 还 不 够 完美 。 


假设 我 有 两 个 函数 : firstFunction 和 secondFunction 。 如 果 想 
证 它们 俩 都 在 页 面 加 载 时 得 到 执行 ， 我 该 怎么 办 ? 如 果 把 它们 逐一 绑 
定 到 onload 事件 上 上， 它们 当中 将 只 有 最 后 那个 才 会 被 实际 执行 : 


window.onload firstFunction,; 


window.onload secondFunction; 


secondFunction 将 取代 firstFunction 。 你 可 能 会 想 ， 每 个 事件 
处 理 函 数 只 能 绑 定 一 条 指令 。 


有 一 种 办 法 可 以 让 我 避 过 这 一 难题 ， 可 以 先 创建 一 个 匿名 画 数 来 容纳 
这 两 个 函数 ， 然 后 把 那个 匿名 函数 绑 定 到 on1oad 事件 上 ， 如 下 所 示 : 


window.onload = function() { 
firstFunction(); 


secondFunction( ) ; 


加 类 包 


ER 实 能 很 好 地 工人 合 ， 这 应 该 


征 最 催 单 的 解决 方案 了 。 


这 里 还 有 一 个 弹性 最 佳 的 解决 方案 页 面 加 载 完 毕 时 
执行 多 少 个 函数 ， 它 都 可 以 应 付 自 如 。 这 个 方案 需要 额外 编写 二 些 代 
码 ， 但 好 处 是 一 旦 有 了 那些 代码 ， 把 函数 绑 定 到 window .onload 事 
件 就 非常 易 行 了 。 


文 个 函数 的 名 字 是 addLoadEvent ， 它 是 由 Simon Willison 〈 详 见 
http://simon.incutio.com ) 编写 的 。 它 只 有 一 个 参数 : 打算 在 页 面 加 载 
完毕 时 执行 的 函数 的 名 字 。 


下 面 是 addLoadEvent 函数 将 要 完成 的 操作 。 


。 把 现 有 的 window .onload 事件 处 理 函 数 的 值 存 入 变量 
oldonload 。 
。 如 果 在 这 个 处 理 函 数 上 还 没有 绑 定 任何 函数 ， 就 像 平 时 那样 把 新 
函数 添加 给 它 。 
。 如 果 在 这 个 处 理 函 数 上 已 经 绑 定 了 一 些 函 数 ， 就 把 新 函数 追加 到 
现 有 指令 的 末尾 。 


下 面 是 addLoadEvent 函数 的 代码 清单 : 


function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = func; 
} else { 


window.onload = function() { 
oldonload( ); 


func( ) ， 


这 将 把 那些 在 页 面 加 载 完毕 时 执行 的 函 证 个 队列 。 如 采 想 把 


刚才 那 两 个 函数 添加 到 这 个 队列 里 去 ， 只 需 写 出 以 下 代码 就 行 了 : 


addLoadEvent (firstFunction); 
addLoadEvent(secondFunction); 


0 元 其 是 在 代码 变 得 越 来 越 复杂 的 时 候 。 
a 只 要 多 写 二 条 记名 就 可 久 
2 2 


个 解决 方案 对 prepareGallery 函数 来 说 好 像 有 点 儿 大 材 小 用 ， 因 
为 \ 有 这 一 个 函数 需要 在 页 面 加 载 完毕 时 执行 。 可 是 ， 为 以 后 的 扩展 
做 一 些 准 备 工作 总 不 是 件 坏事 。 我 决定 把 addLoadEvent 函数 收 永 到 
我 的 脚本 里 ， 这 使 我 只 需 写 出 下 面 这 行 代码 就 可 以 了 : 


addLoadEvent(prepareGallery); 


到 这 一 步 ，prepareGallery 函数 已 经 足够 安全 了 ， 至 少 在 我 的 能 
范围 内 。 接 下 来 ， 我 将 怀疑 的 目光 转 癌 第 4 章 编写 的 ShowPic 画 数 : 


6.4 不 要 做 太 多 的 假设 


我 在 showPic 芳 数 里 发 现 的 第 一 个 问题 足 ， 我 没有 让 它 进 行 任何 测试 
和 检查 。 


showPic 函数 将 由 prepareGallery 函数 调用 ， 而 我 已 经 在 后 者 的 
| 和 getElementsByTagName 等 DOM 方 法 

否 存在 进行 过 检查 ， 所 以 我 确切 地 知道 用 户 的 浏览 器 不 会 因为 不 理 
解 这 两 个 方法 而 出 间 题 。 


不 过 ， 我 还 是 做 出 了 太 多 的 假设 。 别 的 先 不 说 ， 我 在 代码 里 用 到 了 id 
he rd 和 description 的 元 素 ， 但 我 并 未 对 这 些 
元 素 是 人 否 存 在 做 任何 检 


function ShowPic(whichpic) { 
var Source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder.setAttribute("src",source); 


var text = whichpic.getAttribute("title"); 
var description = document.getElementById("description"); 
description.firstCchild.nodeValue = text; 


需要 增加 一 些 语句 来 检查 这 些 元 素 是 否 存 在 。 


showPic 函数 负责 完成 两 件 事 : 一 是 找 出 id 属性 值 是 placeholder 
的 图 片 并 修改 其 src 属性 ， 二 是 找 出 id 属性 是 description 的 元 素 
并 修改 其 第 二 个 于 元 条 ) 的 nodeValue 属性 。 第 一 
件 事 是 这 个 函数 必须 完成 的 任务 ， 第 二 件 事 只 是 一 项 锦 上 添 化 的 补 

充 。 因 此 ， 我 决定 把 检查 工作 分 训 两 不 步骤 以 获得 信 样 一 种 效果 : 

要 placeholder 图 请 存在， 即使 description 元 素 不 存在 ， A 
示 新 图 片 的 操作 也 将 照常 进行 。 


a 函数 里 看 到 的 那样 ， 检 查 某 个 特定 的 元 素 
人 否 存 在 是 一 件 很 商 单 的 事情 : 


if (!document.getElementById("placeholder")) return false; 


紧 随 其 后 的 是 用 来 修改 placeholder 图 片 的 src 属性 的 代码 ， 它 们 
的 效果 是 切换 显示 一 张 新 图 片 : 


var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 


placeholder.setAttribute("src",source); 


以 上 代码 人 责 完 成 函数 的 主要 任务 。 接 下 来 ， 采 用 一 种 稍 有 不 同 的 方 
去 检查 description 元 素 是 否 存在 : 


if (document.getElementById("description")) { 


只 有 通过 了 这 项 检查 ， 人 负 贡 修改 图 片 说 明文 字 的 代码 才 会 得 到 执行 
如 下 所 示 : 


Var text = whichpic.getAttribute("title"); 
var description = document.getElementById("description"); 
description.firstChild.nodeValue = text; 


} 


将 描述 部 分 放 在 if 语句 里 后 ，description 元 素 将 是 可 选 的 。 如 果 
它 存在 ， 它 将 被 更 新 ， 否 则 会 忽略 。 


return true; 


下 面 是 showPic 函数 在 我 给 它 增 加 了 检查 之 后 的 代码 清单 : 


function ShowPic(whichpic) { 
if (!document.getElementById("placeholder")) return false 
var Source = whichpic.getAttribute("href'" ) ， 
var placeholder = document.getElementById("placeholder"); 
placeholder.setAttribute("src",source); 
if (document.getElementById("description")) { 


Var text = whichpic.getAttribute("title"); 
var description = document.getElementById("description"); 
description.firstChild.nodeValue = text; 


return true; 


改进 后 的 showPic( ) 函数 不 再 假设 有 关 标 记 文 档 里 肯定 存在 着 
placeholder 图 片 和 description 元 素 。 即 使 文档 里 没有 


placeholder 图 乒 ， 也 不 会 发 生 任何 JavaScript 错 误 。 


可 是 ， 还 有 一 个 问题 ， 如 果 把 placeholder 图 片 从 标记 文档 里 删 掉 并 
在 浏览 絮 里 刷新 这 页 面 ， 就 会 出 现 这 种 情况 ， 无 论点 击 
imagegallery 清单 里 的 哪 一 个 链接 ， 都 没有 任何 啊 应 。 


这 意味 着 我 们 的 脚本 不 能 平稳 退化 。 此 时 ， 应 该 让 浏览 器 打开 那个 被 
点 击 的 链接 ， 而 不 是 让 什么 事情 都 不 发 生 。 


问题 在 于 prepareGallery 函数 做 出 了 这 样 一 个 假设 : showPic 画 
数 肯 定 会 正常 返回 。 基 于 这 一 假设 ，prepareGallery 函数 取消 了 
onclick 事件 的 默认 行为 : 


links[i].onclick = function() { 
showPic(this); 


return false; 


是 否 要 返回 一 个 false 值 以 取消 onclick 事件 的 默认 行为 ， 其 实 应 该 
由 showPic 函数 决定 。 


showPic 应 返回 两 个 可 能 的 值 。 


。 如 果 图 片 切换 成 功 ， 返 回 true 。 
。 如 果 图 片 切换 不 成 功 ， 返 回 false 。 


为 修正 这 个 问题 ， 应 该 在 返回 前 验证 showPic 的 返回 值 ， 以 便 决 定 是 
否 阻止 默认 行为 。 如 果 showPic 返回 true ， 那 么 更 新 placeholder 
“在 onclick 事件 处 理 函 数 中 ， 我 们 可 以 利用 *! ”对 showPic 的 返回 
值 进 行 取 反 。 


links[i].onclick = function() { 


return !showpic(this); 


现在 ， 如 果 showPic 返回 true ， 我 们 就 返回 false ， 浏 览 器 不 会 打 
开 那 个 链接 。 


如 果 showPic 返回 false ， 那 么 我 们 认为 图 片 没 有 更 新 ， 于 是 返回 
true 以 允许 默认 行为 发 生 。 


下 面 是 prepareGallery 函数 现在 的 代码 清单 : 


function prepareGallery() { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery")) return false; 
var gallery = document.getElementById("imagegallery"); 
var links = gallery.getElementsByTagName("a"); 


for ( var i=0; i < links.length; i++) { 
links[i].onclick = function() { 
return !showpPic(this); 


经 过 一 番 周 折 ， 终 于 把 最 后 一 个 已 知 问题 解决 了 。 如 采 plLlaceholLder 
图 片 不 存在 ， 浏 览 器 将 按 用 户 所 点 击 的 那个 链接 打开 一 张 新 图 片 。 现 
在 可 以 把 placeholder 图 片 重新 放 回 到 标记 里 去 了 。 


6.5 ”优化 


这 几 个 丽 数 已经 相当 完善 了 里 然 它们 的 长 度 有 所 增加 ， 但 它们 对 
记 的 依赖 和 假设 已 经 比 原先 少 多 


尽管 如 此 ， 在 showPic 函数 里 仍 存在 一 些 需 要 处 理 的 假设 。 
比如 说 ， 假 设 每 个 链接 都 有 一 个 title 属性 : 


Var text = whichpic.getAttribute("title"); 


为 了 检查 title 属性 是 否 真 的 存在 ， 可 以 测试 它 征 不 是 等 于 nu11 : 


if (whichpic.getAttribute("title") != null) 


如 果 title 属性 存在 ， 这 个 if 表达 式 将 被 求 值 为 true 。 如 果 title 
属性 不 存在 ，whichpic.getAttribute("title") 将 等 于 null 
， 而 这 个 if 表达 式 将 被 求 值 为 false 。 


这 个 if 表达 式 还 可 以 简写 为 : 


if (whichpic.getAttribute("title")) 


只 要 title 属性 存在 ， 这 个 if 表达 式 驶 将 返回 一 个 true 值 。 


作为 一 种 简单 的 视觉 反馈 ， 在 title 属性 不 存在 时 把 变量 text 的 值 
设置 为 空 字符 串 : 


if (whichpic.getAttribute("title")) { 
var text = whichpic.getAttribute("title"); 
} else { 


Var text = ""; 


} 


下 面 是 完成 同样 操作 的 男 一 种 办 法 : 


var text = whichpic.getAttribute("title") ? 


whichpic.getAttribute("title™") : "",， 


紧 跟 在 getAttribute 后 面 的 问号 是 一 个 三 元 操作 符 (ternary 
operator) 。 这 个 问号 的 后 面 是 变量 text 的 两 种 可 取 值 。 如 果 
getAttribute("title") 的 返回 值 不 是 nuL1 ，text 变量 将 被 赋 
值 为 第 一 个 值 ， 如 果 getAttribute("title") 的 返回 值 是 nu11 ， 
text 变量 将 被 赋值 为 第 二 个 值 : 


variable = condition ? If true : if false; 


如 果 title 属性 存在 ， 变 量 text 将 被 赋值 为 
whichpic.getAttribute("title")。 如 果 title 属性 不 存在 ， 
变量 text 将 被 赋值 为 一 个 空 字符 串 ("") 。 

三 元 操作 符 是 if/else 语句 的 一 种 变 体形 式 。 它 比较 简短 ， 但 逻辑 关 
系 表达 得 不 那么 明显 。 如 果 你 也 这 么 认为 ， 那 就 使 用 if/else 语句 好 
和 

现在 ， 如 果 试 图 把 ijmagegallery 清单 里 的 某 个 链接 的 title 属性 删 
掉 并 重新 加 载 这 个 页 面 ， 当 你 再 去 点 击 那 个 链接 的 时 候 ， 
description 元 素 将 被 填 入 一 个 空 字符 串 。 

如 果 想 做 到 十 全 十 美的 话 ， 可 以 对 任何 一 种 情况 进行 检查 。 


比如 说 ， 检 查 placeholder 元 素 是 否 存 在 ， 但 需要 假设 那 是 一 张 图 
片 。 为 了 验证 这 种 情况 ， 可 以 用 nodeName 属性 来 增加 一 项 测试 : 


if (placeholder.nodeName != "IMG") return false; 


请 注意 ，nodeName 属性 总 是 返回 一 个 大 写字 母 的 值 ， 即 使 元 素 在 
HTML 文 档 里 是 小 写字 母 。 


我 还 可 以 引入 更 多 的 检查 。 比 如 说 ， 假 设 description 元 素 的 第 一 个 
子 元 素 (firstCchild ) 是 一 个 文本 节点 。 我 应 该 对 此 进行 检查 。 


可 以 利用 nodeType 属性 来 进行 这 项 检查 。 还 记得 吗 ， 文 本 和 点 的 
nodeType 属性 值 等 于 3: 


if (description.firstChild.nodeType == 3) { 


description,.firstchild,nodevalue = text; 


下 面 是 引入 了 以 上 几 项 检查 之 后 showPic 函数 的 代码 清单 : 


function ShowPic(whichpic) { 
if (!document.getElementById("placeholder")) return false; 
var Source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
if (placeholder.nodeName != "IMG") return false; 
placeholder.setAttribute("src",source); 
if (document.getElementById("description")) { 
var text = whichpic.getAttribute("title") ? 
whichpic.getAttribute("title™") : ""; 
var description = document.getElementById("description"); 
if (description.firstChild.nodeType == 3) { 
description.firstChild.nodeValue = text; 


} 


return true; 


} 


因为 又 增加 了 几 项 检查 ，showPic() 邢 芳 数 里 的 代码 变 从 更 多 人 
际 工作 中 ， 你 要 上 自己 决定 是 否 真 的 需要 这 些 检 查 。 它 们 针对 的 是 HTML 
文档 有 可 能 不 在 你 控制 范围 内 的 情况 。 理 想 情况 下 ， 你 的 脚本 不 应 该 
对 HTML 文 档 的 内 容 和 结构 做 太 多 的 假设 。 


这 方面 的 决定 需要 根据 具体 情况 来 做 出 。 


6.6 ”键盘 访问 


J 天 onclick 事件 处 理 的 脚本 里 ， 有 一 项 优化 工作 是 不 能 不 考虑 


下 面 是 prepareGallery() 函数 中 的 核心 代码 : 


links[i].onclick = function() { 
if (ShowPic(this)) 区 
return false; 
} else { 
return true; 


} 


} 


首先 ， 为 了 简洁 ， 将 它 改 为 使 用 三 元 运算 符 。 


links[i].onclick = function() { 


return ShowPic(this) ? false : true; 


} 


这 上 段 代码 本 喘 没 有 任何 毛病 。 当 这 个 链接 被 点 击 时 ，showPic( ) 函数 
2 。 不 过 ， 这 作 了 一 个 假定 : 用 户 只 会 使 用 岂 标 来 点 击 这 个 
连接 。 


但 是 ， 千 万 不 要 起 记 并 非 所 有 的 用 户 都 使 用 幢 标 。 比 如 说 ， 有 视力 残 
疾 的 用 户 往往 无 法 看 清 屏幕 上 四 处 移动 的 鼠标 指针 ， 他 们 往往 更 喜欢 
使 用 键盘 。 

作为 一 个 众所周知 的 事实 ， 不 使 用 鼠标 也 可 以 浏览 Web。 键 盘 上 的 Tab 


人 到 另 一 个 链接 ， 而 按 下 回 车 键 将 局 用 当 
且 贬 f 灵 。 


有 个 名 叫 onkeypress 的 事件 处 理 函 数 是 专门 用 来 处 理 键盘 事件 的 。 
按 下 键盘 上 任何 一 个 按键 都 会 触发 onkeypress 事件 。 


如 果 想 让 onkeypress 事件 与 onclick 事件 触发 同样 的 行为 ， 可 以 简 
单 地 把 有 关 指 令 复制 一 份 ; 


links[i].onclick = function() { 
return ShowPic(this) ? false : true; 


} 
links[i].onkeypress = function() { 
return ShowPic(this) ? false : true; 


A 以 确保 onkeypress 模仿 onclick 事件 的 行 


links[i].onkeypress = links[i].onclick; 


上 面 这 条 语句 把 onclick 事件 的 所 有 功能 赋 给 onkeypress 事件 : 


links[i].onclick = function() { 
return ShowPic(this) ? false : true; 


links[i].onkeypress = links[i].onclick; 


这 就 是 JavaScript 与 HTML 分 离 带 来 的 方便 。 


如 果 你 已 经 把 所 有 的 函数 和 事件 处 理 函 数 都 放 在 了 外 部 文件 里 ， 束 可 
以 只 在 必要 时 修改 JavaScript 代码 ， 而 根本 不 用 动 HTML 文件 。 你 可 
以 随时 打开 你 的 脚本 文件 ， 优 化 它们 ， 你 做 出 的 修改 将 目 动 作用 于 每 
个 引用 了 它 的 网 页 。 


如 朱 你 仍 在 使 用 内 藤 于 HTML 文 档 的 事件 处 理 函 数 ， 在 修改 JavaScript 
功能 之 后 ， 你 可 能 需要 打开 HTML 文 档 去 进行 大 量 的 修改 。 比 如 说 ， 在 
. 片 库 这 个 例子 里 ， 我 当初 曾 使 用 过 一 些 如 下 所 示 的 内 艇 事件 处 理 辑 


<1i> 
<a href="images/fireworks.jpg" onclick="showPic(this);return 
false;"title="A 


wfireworks display">Fireworks</a> 
</1i> 


在 对 showPic( ) 函数 返回 true 或 false 的 情况 做 出 调整 之 后 ， 我 不 
得 不 对 HTML 文 档 里 的 onclick 事件 处 理 函 数 做 出 相应 的 修改 ， 如 下 
所 示 : 


< 二 > 

<a href="images/fireworks.jpg" onclick="return showPic(this) ? 
false : true;" 
=™» title="A fireworks display">Fireworks</a> 


</1i> 


如 琳 图 片 库 有 大 量 图 片 的 话 ， 这 种 修改 工作 真是 义 素 义 烦 。 


设想 一 下 ， 如 果 想 添加 onkeypress 事件 处 理 函 数 ， 就 不 得 不 找 出 所 
有 的 链接 ， 给 它们 每 个 增加 一 个 内 凯 事 件 处 理 函 数 : 


<1i> 

<a href="images/fireworks.jpg" onclick="return showpPic(this) ? 
false : true;" 
= oNnkeypress="return ShowPic(this) ? false : true;" 


=» title="A fireworks display">Fireworks</a> 
</1i> 


这 是 一 件 藻 差事 (非常 麻烦 又 非常 容易 出 错 ) 。 而 现在 我 只 修改 了 很 
少 几 条 语句 就 把 一 切 安排 妥当 。 


小 心 onkeypress 


我 最 后 的 决定 是 不 添加 onkeypress 事件 处 理 函 数 。 原 因 是 这 个 事件 
处 理 函 数 很 容易 出 问题 。 用 户 每 按 下 一 个 按键 都 会 触发 它 。 在 某 些 浏 
哆 絮 里， 甚至 包括 Tab 键 ! 这 意味 着 如 果 绑 定 在 onkeypress 事件 上 的 
人 处理 函数 上 返回 的 是 false ， 那 些 只 使 用 键盘 访问 的 用 户 将 永远 无 法 
离开 当前 链接 。 我 的 图 片 库 网 页 就 存在 这 样 的 问题 一 一 只 要 图 片 切 换 
成 功 ，showPic 函数 就 将 返回 false 。 


那 这 些 只 使 用 键盘 的 人 可 怎么 办 ? 


注 运 的 是 ，onclick 事件 处 理 函 数 比 我 们 想象 得 更 聪明 。 虽 然 它 的 名 
字 “onclick” 给 人 一 种 它 只 与 鼠标 点 击 动作 相关 联 的 印象 ， 但 事实 却 并 非 
如 此 : 在 几乎 所 有 的 浏览 器 里 ， 用 Tab 键 移动 到 某 个 链接 然后 按 下 回 车 
键 的 动作 也 会 触发 onclick 事件 。 从 这 一 点 来 看 ， 把 它 命名 为 
onactivate 也 许 更 恰如其分 。 


围绕 着 onclick 和 onkeypress 有 许多 让 人 困惑 的 东西 ， 它 们 的 名 字 
是 造成 这 些 困惑 的 主要 原因 。 有 些 可 用 性 指南 建议 我 们 在 处 理 
onclick 事件 时 也 一 定 要 处 理 onkeypress 事件 。 事 实 上 ， 这 种 搭配 
导致 的 问题 远 比 它们 解决 的 更 多 。 


最 好 不 要 使 用 onkeypress 事件 处 理 函 数 。onc1lLick 事件 处 理 函 数 已 
经 能 满足 需要 。 虽 然 它 叫 “onclickt”， 但 它 对 键盘 访问 的 支持 相当 完美 。 


下 面 是 最 终 完成 的 prepareGallery() 和 showPic() 函数 的 代码 请 
单 : 


function prepareGallery() { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery")) return false; 
var gallery = document.getElementById("imagegallery"); 
var links = gallery.getElementsByTagName("a"); 
for ( var i=0; i < links.length; i++) { 
links[i].onclick = function() { 
return ShowPic(this) ? false : true; 


} 
} 


function ShowPic(whichpic) { 
if (!document.getElementById("placeholder")) return false; 
var Source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
if (placeholder.nodeName != "IMG") return false; 
placeholder.setAttribute("src", source); 
if (document.getElementById("description")) { 
var text = whichpic.getAttribute("title") ? 
whichpic.getAttribute("title™") : ""; 
var description = document.getElementById("description"); 
if (description.firstChild.nodeType == 3) { 
description.firstChild.nodeValue = text; 


return true; 


} 


注意 ”可 以 在 Friends of ED 网 站 (http://www.friendsofed.com ) 上 
找到 本 书 的 页 面 来 下 载 这 两 个 图 数 的 最 终 完 整 版 本 。 


6.7 把 JavaScript 与 CSS 结 合 起 来 


把 JavaScript 代 码 从 HTML 文 档 里 分 离 出 去 还 带 来 男 一 个 好 处 。 在 把 内 
0 我 在 文档 里 为 JavaScript 代 码 留 下 
了 一 | 66 二 分 ?”: 


<ul id="imagegallery"> 


这 个 挂 钓 完全 可 以 用 在 CSS 样 式 表 里 。 


比如 说 ， 如 果 不 想 把 图 片 清单 显示 成 一 个 带 项 目 符号 的 列表 ， 则 完全 
可 以 利用 这 个 jmagegallery 写 出 一 条 如 下 所 示 的 CSS 语 人 句 : 


#imagegallery { 


list-style: none; 


我 可 以 把 这 条 CSS 语 句 存 入 一 个 外 部 文件 ， 比 如 layout .css 文件 ， 
然后 再 从 gallery .html 文件 的 <head> 部 分 引用 它 : 


<link rel="stylesheet" href="styles/layout.css" type="text/css" 
media="screen" /> 


利用 CSS， 甚 至 可 以 让 这 份 清单 里 的 列表 项 从 按 纵 疝 显 示 变 成 按 模 同 显 
修 \: 


#imagegallery li { 
display: inline; 


上 上面 这 两 条 CSS 语 句 将 使 我 的 网 页 变 成 如 图 6-1 所 示 的 样子 。 
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图 6-1 
即使 把 图 片 链 接 换 成 一 些 缩微 图 而 不 是 文字 ，CSS 也 依然 有 效 : 


<ul id="imagegallery"> 
<1i> 
<a href="images/fireworks.jpg" title="A fireworks display"> 
<img src="images/thumbnail fireworks.jpg" alt="Fireworks" /> 
</a> 
</1i> 
<1i> 
<a href="images/coffee.jpg" title="A cup of black coffee" > 
<img src="images/thumbnail _ coffee.jpg" alt="Coffee" /> 
</a> 
</1i> 
<1i> 
<a href="images/rose.jpg" title="A red, red rose"> 


<img src="images/Xthumbnail_rose.jpg"” alt="Rose" /> 
</a> 
</1i> 
<1i> 
<a href="images/bigben.jpg" title="The famous clock"> 
<img src="images/thumbnail bigben.jpg" alt="Big Ben" /> 
</a> 
</1i> 


</U]> 


图 6-2 是 这 个 网 页 的 新 形象 ， 图 片 链接 都 显示 为 缩 略 图 而 不 是 文本 。 
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图 6-2 
下 面 是 layout ,css 文件 的 完整 清单 : 


body { 
font-family: "Helvetica","Arial",serif; 
color: #333; 
background-color: #ccc; 
margin: 1em 10%,; 


} 
hi { 
color: #333; 
background-color: transparent,; 
} 
a lt 
color: #c60; 
background-color: transparent; 
font-weight: bold; 
text-decoration: none; 


} 
ul { 
padding: 0; 


1i { 
float: left; 
padding: 1em， 
list-style: none; 


} 
#imagegallery { 
list-style: none; 


} 
#imagegallery li { 
display: inline; 


#imagegallery li a img { 
border: 0; 
} 


这 份 样式 表 将 把 我 的 图 片 库 页 面 装 点 得 既 美 观 又 大 方 ， 如 图 6-3 所 示 。 
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图 6-3 


6.8 DOM Core 和 HTML-DOM 
至 此 ， 我 在 编写 Javascript 代 码 时 只 用 到 了 以 下 几 个 DOM 方 法 ; 


。 getElementById 
。 getElementsByTagName 
。 getAttribute 
。 SetAttribute 


这 些 方法 都 是 DOM Core 的 组 成 部 分 。 它 们 并 不 专属 于 JavaScript， 文 持 
DOM 的 任何 一 种 程序 设计 语言 都 可 以 使 用 它们 。 它 们 的 用 途 也 并 非 仅 
限于 处 理 网 页 ， 它 们 可 以 用 来 处 理 用 任何 一 种 标记 语言 (比如 XML，) 
编写 出 来 的 文档 。 


在 使 用 JavaScript 语 言 和 DOM 为 HTML 文 件 编写 脚本 时 ， 还 有 许多 属性 
可 供 选 用 。 例 如 ， 我 已 经 使 用 了 一 个 属性 onclick ， 用 于 图 片 库 中 的 
事件 管理 。 这 些 属性 属于 HTML-DOM， 它 们 在 DOM Core 出 现 之 前 很 
久 就 已 经 为 人 们 所 熟悉 了 。 


比如 说 ，HTML-DOM 提 供 了 一 个 forms 对 象 。 这 个 对 象 可 以 把 下 面 这 
样 的 语句 : 


document .getElementsByTagName( "form") 


document .forms 


或 
cs 


类 似 地 ，HTML-DOM 还 提供 了 许多 描述 各 种 HTMEL 元 系 的 属性 。 比 如 
说 ，HTML-DOM 为 图 片 提 供 的 src 属性 可 以 把 下 面 这 样 的 语句 : 


element .getAttribute("src") 


element.src 


Cs 
学 


这 些 方法 和 属性 可 以 相互 替换 。 同 样 的 操作 既 可 以 只 使 用 DOM Core 来 
实现 ， 也 可 以 使 用 HTML-DOM 来 实现 。 正 如 大 家 看 到 的 那样 ，HTML- 
DOM 代 码 通常 会 更 得， 必须 提醒 一 下 ， 它 们 只 能 用 来 处 理 Web 文 档 。 
如 果 你 打算 用 DOM 处 理 其 他 类 型 的 文档 ， 请 千 万 注意 这 一 点 。 


如 果 使 用 HTML-DOM 的 话 ， 就 可 以 把 showPic 写 得 简短 一 些 。 


下 面 这 条 语句 使 用 了 DOM Core 来 得 到 whichpic 元 素 的 href 属性 并 


赋 给 变量 source : 


var Source = whichpic.getAttribute("href"); 


下 面 是 使 用 HTML-DOM 达 到 同样 目的 的 语句 : 


var Source = whichpic.href; 


下 面 是 使 用 DOM Core 的 另 一 个 例 季 ， 这 次 把 placeholder 元 素 的 
src 属性 设置 为 变量 source 的 值 : 


placeholder.setAttribute("src",source); 


下 面 是 使 用 HTML-DOM 达 到 同样 目的 的 语句 : 


placeholder.src = Source 


即使 你 决定 只 使 用 DOM Core 方 法 ， 也 应 该 了 解 HTML-DOM。 在 阅读 
别人 编写 的 脚本 时 难免 会 遇 到 各 种 HTML-DOM 记 号 ， 你 至 少 应 该 知道 
都 是 干什么 用 的 。 


在 本 书 的 绝 大 多 数 章节 里 ， 我 只 使 用 DOM Core 来 编写 代码 。 虽 然 代 码 
会 因此 而 变 得 有 点 儿 宛 长 ， 但 我 认为 DOM Core 方 法 更 容易 使 用 。 当 
然 ， 你 不 必 和 我 一 样 ， 完 全 可 以 根据 个 人 喜好 和 具体 情况 来 做 出 选 

。 我 会 尽 可 能 地 告诉 你 ， 在 哪些 地 方 可 以 用 HTML-DOM 来 简化 代 


6.9 ”小结 


在 本 章 里 ， 我 对 图 片 库 进行 了 多 项 优化 ， 我 的 HTML 标 记 变 得 更 加 整 
齐 。 我 还 为 我 的 图 片 库 网 页 提供 了 一 个 基本 的 CSS。 当 然 ， 最 重要 的 是 
改进 了 JavaScript 代 码 。 下 面 是 我 在 本 章 完 成 的 几 项 主要 工作 。 


。 尽量 证 我 的 JavaScript 代 码 不 再 依赖 于 那些 没有 保证 的 假设 ， 为 此 
我 引入 了 许多 项 测试 和 检查 。 这 些 测 试 和 检查 使 我 的 JavaScript 代 
码 能 够 平稳 退化 。 

。 没有 使 用 onkeypress 事件 处 理 函 数 ， 这 使 我 的 JavaScript 代 码 的 
可 访问 性 得 到 了 保证 。 

。 最 重要 的 是 把 事件 处 理 函 数 从 标记 文档 分 离 到 了 一 个 外 部 的 
1 。 这 使 我 的 JavaScript 代 码 不 再 依赖 于 HTML 文 档 的 

容 和 结构 。 


图 6-4 是 图 片 库 在 经 过 本 章 的 种 种 优化 之 后 的 样子 。 
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图 6-4 
我 认为 ， 结 构 与 行为 的 分 离 程 度 越 大 越 好 。 


在 图 片 库 的 标记 文档 部 分 还 有 一 些 内 容 让 我 感到 不 太 满 意 。 比 如 说 ， 
placeholder 和 description 元 素 是 单纯 为 了 showPic 琅 数 而 存 


在 的 ， 但 不 支持 或 禁用 了 JavaScript 功 能 的 浏览 器 也 会 把 它们 呈现 出 
来 ， 这 吏 难 免 会 给 访问 着 市 来 不 便 甚 至 是 困扰 。 


理想 的 情况 是 ， 让 这 两 个 元 素 只 在 过 到 那些 支持 DOM 的 浏 哎 如 时 才 出 
现在 HTML 文 档 里 。 在 下 一 章 里 ， 你 将 会 看 到 如 何 利 用 DOM 提 供 的 方 
法 和 属性 去 创建 HTML 元 素 ， 并 把 它们 插入 HTML 文 档 的 。 


第 7 章 动态 创建 标记 


本 章 内 容 


。 传统 技术 : document ,write 和 innerHTML 。 
。 深 入 剖析 DOM 方 法 : createELement 、createTextNode 
“appendchild 和 insertBefore 。 


此 前 见 过 的 绝 大 多 数 DOM 方 法 只 能 用 来 查找 元 素 。getElementById 
和 getElementsByTagName 都 可 以 方便 快捷 地 找到 文档 中 的 某 个 或 
某 些 特定 的 元 素 广 点 ， 这 些 元 素 随 后 可 以 用 诸如 setAttribute ( 改 
变 某 个 属性 的 值 ) 和 nodeValue (改变 某 个 元 素 节 点 所 包含 的 文本 ) 
之 类 的 方法 和 属性 来 处 理 。 我 的 图 片 库 就 是 这 样 实现 的 。showPic 画 
数 先 找 出 id 属性 值 是 placeholder 和 description 的 两 个 元 素 ， 
然后 刷新 它们 的 内 容 。placeholder 元 素 的 src 属性 是 用 
setAttribute 修改 的 ，description 元 素 所 包含 的 文本 是 用 
ne 属性 修改 的 。 在 这 两 种 情况 里 ， 都 是 对 已 经 存在 的 元 素 做 
牙 改 。 


这 是 绝 大 多 数 JavaScript 画 数 的 工作 原理 。 网 页 的 结构 由 标记 负责 创 
建 ，JavaScript 范 数 只 用 来 改变 某 些 细节 而 不 改变 其 底层 结构 。 
JavaScript 也 可 以 用 来 改变 网 页 的 结构 和 内 容 。 本 章 中 ， 你 将 学 习 一 些 
DOM 方 法 ， 通 过 创建 新 元 素 和 修改 现 有 元 素来 改变 网 页 结构 。 


7.1 一 些 传统 方法 


在 学 习 利 用 DOM 方 法 在 Web 浏 哆 絮 中 往 文 档 添 加 标记 时 ， 先 回顾 两 个 
过 去 使 用 的 技术 ， 即 document .write 和 innerHTML 。 


7.1.1 document .write 


document 对 象 的 write( ) 方法 可 以 方便 快捷 地 把 字符 串 插 入 到 文档 
里 。 


请 把 以 下 标记 代码 保存 为 一 个 文件 ， 文 件 名 就 用 test .html 好 了 。 


<!IDOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="utf-8" /> 
<title>Test</title> 


<script> 
document .write("<p>This is inserted.</p>"); 
</script> 
</body> 
</html> 


如 果 把 test .html 文件 加 载 到 Web 浏 览 咽 里 ， 你 将 看 到 内 容 为 “This is 
inserted.” 的 文本 段落， 如 图 7-1 所 示 。 


全 国人 洛 @ 0:+ 9 


This is inserted . 


图 7-1 


document ,write 的 最 大 缺点 是 它 违 背 了 “行为 应 该 与 表现 分 离 ” 的 原 
则 。 即 使 把 document ,write 语句 挪 到 外 部 函数 里 ， 也 还 是 需要 在 标 
记 的 <body> 部 分 使 用 <script> 标签 才能 调用 那个 函数 。 


下 面 这 个 函数 以 一 个 字符 串 为 参数 ， 它 将 把 一 个 <p> 标签 、 字 符 串 和 
一 个 </p> 标签 拼接 在 一 起 。 拼 接 后 的 字符 串 被 保存 到 变量 str ， 然 后 
用 document .write() 方法 写 出 来 : 


function insertParagraph(text) { 
var str = "<p>"; 
Str += text,; 
str += "</p>"; 


document .write(str); 


可 以 把 这 个 函数 保存 在 外 部 文件 example .js 里 。 为 了 调用 这 个 函 
数 ， 必 须 在 标记 里 插入 <script> 标签 : 


<1DOCTYPE html> 

<htm]l lang="en"> 

<head> 
<meta charset="utf-8" /> 
<title>Test</title> 
<script src="example.js"> 
</script> 


<script> 
insertParagraph("This is inserted."); 
</script> 


像 上 面 这 样 把 JavaScript 和 和 HTML 代 码 混 淋 在 一 起 是 一 种 很 不 好 的 做 
法 。 这 样 的 标记 有 既 不 容易 阅读 和 编辑 ， 也 无 法 至 受到 把 行为 与 结构 分 
离开 来 的 好 处 。 


这 样 的 文档 还 很 容易 导致 验证 错误 。 比 如 说 ， 在 第 一 个 例子 里 ， 
<script> 标签 后 面 的 “<<p> ”很 容易 被 误 认 为 是 <p> 标签 ， 而 在 
<script> 标签 的 后 面 打 开 <p> 标签 是 非法 的 。 事 实 上 ， 那 个 “<p> 
”和 和 “</p> ”只 不 过 是 一 个 将 被 插入 文档 的 字符 串 的 组 成 部 分 而 已 。 


还 有 ，MIME 类 型 application/xhtml+xml 与 document ,write 
不 兼容 ， 浏 览 器 在 呈现 这 种 XHTML 文 档 时 根本 不 会 执行 
document .write 方法 。 


从 某 种 意义 上 讲 ， 使 用 document .write 方法 有 点 儿 像 使 用 <font> 
标签 去 设 定 字 体 和 颜色 。 虽 然 这 两 种 技术 在 HITML 文 档 里 都 工作 得 不 
错 ， 但 它们 都 不 够 优雅 。 


把 结构 、 行 为 和 样式 分 开 永 远 都 是 一 个 好 主意 。 只 要 有 可 能 ， 就 应 该 
用 外 部 CSS 文 件 代 替 <font> 标签 去 设 定 和 管理 网 页 的 样式 信息 ， 最 好 
用 外 部 JavaScript 文 件 去 控制 网 页 的 行为 。 应 该 避免 在 <body> 部 分 乱 
用 <script> 标 答 ， 避 人 免 使 用 document ,write 方法 。 


7.1.2 ”innerHTML 属性 


现 如 今 的 济 吕 名 几 于 都 文 持 属 性 innerHTML ， 这 个 属性 并 不 是 W3C 
DOM 标 准 的 组 成 部 分 ， 但 现 已 经 包 侣 到 HTML5 规 范 中 。 它 始 见于 微软 
公司 的 IE 4 浏览 右 ， 并 从 那 时 起 逐 讲 被 其 他 的 浏览 龙 接 受 。 


innerHTML 属性 可 以 用 来 读 、 写 某 给 定 元 素 里 的 HTML 内 容 。 要 了 解 
它 如 何 工 作 ， 请 把 下 面 这 段 代 码 插入 test.html 文档 的 <body> 部 


分 : 


<div id="testdiv"> 
<p>This is <em>my</em> content.</p> 


</div> 


用 DOM 的 眼睛 看 testdiv 内 的 标记 ， 是 如 图 7-2 所 示 的 结构 。 
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div 元 素 的 id 是 testdiv。 它 包含 一 个 元 素 节 点 (p 元 素 ) 。 这 个 p 
元 素 又 有 一 些 子 节点 。 其 中 有 两 个 文本 节点 ， 值 分 别 是 This is 和 


content 。 还 有 一 个 元 素 节 点 (em 元 素 ) ，em 元 素 本 身 包含 一 个 文 
本 广 点 ， 这 个 文本 节点 的 值 是 my 。 

DOM 提 供 了 关于 这 个 标记 的 非常 详细 的 一 幅 图 画 。 使 用 DOM 提 供 的 方 
法 和 属性 可 以 对 任何 一 个 节点 进行 单独 的 访问 。 这 个 标记 从 
innerHTML 属性 的 角度 来 看 则 简单 得 多 ， 如 图 7-3 所 示 ， 束 
innerHTML 属性 看 来 ，id 为 testdiv 的 标记 里 面 只 有 一 个 值 为 
<p>This is <em>my</em> content.</p> 的 HTML 字 符 串 。 


元 素 市 斥 


div 


<p>This is <em>my</em> content.</p> 


HTML 
图 7-3 
用 下 面 这 个 新 函数 更 新 example, js 文件 。 


window.onload = function() { 


var testdiv = document .getElementById("testdiv"); 
alert(testdiv.innerHTML ) ; 


然后 在 Web 浏览 器 里 刷新 test .html 页 面 ，div 元 素 ( 它 的 id 属性 
值 等 于 testdiv ) 的 innerHTML 属性 值 将 显示 在 一 个 alert 对 话 框 
里 ， 如 图 7-4 所 示 。 
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图 7-4 


很 明显 ，innerHTML 属性 无 细节 可 言 。 要 想 获 得 细 方 ， 就 必须 使 用 
DOM 方 法 和 属性 。 标 准 化 的 DOM 像 手术 刀 一 样 精细 ，innerHTML 属 
性 就 像 一 把 大 锤 那 样 粗放 。 

大 锤 有 大 锤 的 用 武之 地 。 在 你 需要 把 一 大 段 HTML 内 容 揪 入 网 页 时 ， 
innerHTML 属性 更 适用 。 它 既 支 持 读 取 ， 又 支持 写 入 ， 你 不 仅 可 以 用 
它 来 读 出 元 素 的 HTML 内 容 ， 还 可 以 用 它 把 HTML 内 容 写 入 元 素 。 


编辑 test .html 文件 ， 让 id 属性 值 等 于 testdiyv 的 元 素 变 成 空白 : 


<div id="testdiv"> 
</div> 


把 下 面 这 段 JavaScript 代 码 放 入 example .js 文件 ， 就 可 以 把 一 段 
HTML 内 容 插 入 这 个 <div> 标签 : 


window.onload = function() { 
var testdiv = document.getElementById("testdiv"); 


testdiv.innerHTML = "<p>I inserted <em>this</em> content.</p>"; 


在 Web 浏 览 器 里 刷新 test .html 文件 ， 你 就 可 以 看 到 如 图 7-5 所 示 的 结 
果 。 
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I inserted this content. 


图 7-5 


利用 这 个 技术 无 法 区 分 “插入 一 段 HTML 内 容 * 和 “替换 一 段 HTML 内 
容 ”。testdiyv 元 素 里 有 没有 HTML 内 容 无 关 紧 要 : 一 旦 你 使 用 了 
innerHTML 属性 ， 它 的 全 部 内 容 都 将 被 替换 。 


在 test .html 文件 里 ， 把 id 属性 值 等 于 testdiyv 的 元 聂 的 内 容 修改 
回 它 原 来 的 样子 : 


<div id="testdiv"> 
<p>This is <em>my</em> content.</p> 


</div> 


example .js 文件 保持 不 变 。 如 果 你 在 Web 浏 览 器 里 刷新 test .html 
文件 ， 结 果 将 和 刚才 一 样 。 包 含 在 testdiyv 元 素 里 HTML 内 容 被 
innerHTML 属性 完全 改变 了 ， 原 来 的 HTML 内 容 未 留 下 任何 痕迹 。 


在 需要 把 一 大 段 HTML 内 容 插 入 一 份 文档 时 ，innerHTML 属性 可 以 让 
你 又 快 又 简单 地 完成 这 一 任务 。 不 过 ，innerHTML 属性 不 会 返回 任何 
对 刚 插 入 的 内 容 的 引用 。 如 果 想 对 刚 插入 的 内 容 进 行 处 理 ， 则 需要 使 
用 DOM 提 供 的 那些 精确 的 方法 和 属性 。 


innerHTML 属性 要 比 document .write ) 方法 更 值得 推荐 。 使 用 
innerHTML 属性 ， 你 就 可 以 把 JavaScript 代 码 从 标记 中 分 离 出 来 。 用 不 
着 再 在 标记 的 <body> 部 分 插入 <script> 标签 。 


类 似 于 document .write 方法 ，innerHTML 属性 也 是 HTML 专 有 属 
性 ， 不 能 用 于 任何 其 他 标记 语言 文档 。 浏 览 器 在 呈现 正宗 的 XHTML 文 


档 ( 即 MIME 类 型 是 application/xhtml+xml 的 XHTML 文档 ) 时 
会 直接 忽略 掉 ijnnerHTML 属性 。 


在 任何 时 候 ， 标 准 的 DOM 都 可 以 用 来 奉 代 innerHTML 。 虽 说 这 往往 
需要 多 编写 一 些 代 码 才能 获得 同样 的 效果 ， 但 DOM 同 时 也 提供 了 更 高 
的 精确 性 和 更 强大 的 功能 。 


7.2 DOM 方 法 


getElementById 和 getElementsByTagName 等 方法 可 以 把 关于 
文档 结构 和 内 容 的 信息 检索 出 来 ， 它 们 非常 有 用 。 


DOM 是 文档 的 表示 。DOM 所 包含 的 信息 与 文档 里 的 信息 一 一 对 应 。 你 
只 要 学 会 问 正 确 的 问题 (使 用 正确 的 方法 ) ， 就 可 以 获取 DOM-T 点 树 
生 住 何 二 MT 胸肌 中 


DOM 是 一 条 双 同 车 道 。 不 仅 可 以 获取 文档 的 内 容 ， 还 可 以 更 新 文档 的 
内 容 。 如 果 你 改变 了 了 DOM 节点 树 ， 文 档 在 浏览 器 里 的 呈现 效果 就 会 发 
生变 化 。 你 已 经 见识 过 setAttribute 方法 的 神奇 之 处 了 。 用 这 个 方 
法 可 以 改变 DOM 太 点 树 上 的 某 个 属性 廊 点 ， 相 天 文档 在 浏 贤 器 里 的 呈 
现 就 会 发 生 相 应 的 变化 。 不 过 ，setAttribute 方法 并 未 改变 文档 的 
物理 内 容 ， 如 果 用 文本 编辑 器 而 不 是 浏览 器 去 打开 这 个 文档 ， 我 们 将 

看 不 到 任何 变化 。 只 有 在 用 浏览 絮 打 开 那 份 文档 时 才能 看 到 文档 呈现 

效果 的 变化 。 这 是 因为 浏览 器 实际 显示 的 是 那 柠 DOM 市 点 树 。 在 浏览 
器 看 来 ，DOMT 点 树 才 是 文档 。 


一 旦 明白 了 这 个 道理 ， 以 动态 方式 实时 创建 标记 就 不 那么 难以 理解 
了 。 你 并 不 是 在 创建 标记 ， 而 是 在 改变 DOMT 点 树 。 做 到 这 一 点 的 天 
键 是 一 定 要 从 DOM 的 角度 去 思考 问题 。 


在 DOM 看 来 ， 一 个 文档 了 是 一 柑 世 点 树 。 如 采 你 想 在 节点 树 上 添加 内 
容 ， 人 ° 如果 你 想 添 加 一 些 标 记 到 文档 ， 束 必须 插 
入 元 取信 所 。 


7.2.1 createElement 方法 


编辑 test ,html 文件 ， 让 id 等 于 testdiv 的 那个 <div> 标签 的 内 容 


<div id="testdiv"> 


</div> 


我 想 把 一 段 文 本 插入 testdiv 元 素 。 用 DOM 的 语言 来 说 ， 就 是 想 添 加 
一 个 p 元 素 节 点 ， 并 把 这 个 节点 作为 div 元 素 节 点 的 一 个 子 节点 。 

(div 元 素 节 点 已 经 有 了 一 个 子 节 点 ， 那 是 一 个 id 属性 节点 ， 值 是 
testdiv) 。 


这 项 任务 需要 分 两 个 步 又 完成 : 
(1) 创建 一 个 新 的 元 到 ; 
(2) 把 这 个 新 元 聚 插入 市 后 树 。 


第 一 个 步骤 要 用 DOM 方 法 createELement 来 完成 。 下 面 是 使 用 这 个 
方法 的 语法 : 


document .createElement (nodeNanme) 


下 面 这 条 语句 将 创建 一 个 p 元 素 : 


document .createElement("p"); 


这 个 方法 本 身 并 不 能 影响 页 面 表 现 ， 还 需要 把 这 个 新 创建 出 来 的 元 素 
揪 入 到 文档 中 去 。 为 此 ， 你 需要 有 个 东西 来 引用 这 个 新 创建 出 来 的 和 
点 。 不 论 何 时 何 地 ， 只 要 你 使 用 了 createElement 方法 ， 就 应 该 把 
新 创建 出 来 的 元 素 赋 给 一 个 变量 就 总 是 个 好 主意 : 


var para = document .createElement("p" ) ; 


变量 para 现在 包含 着 一 个 指向 刚 创建 出 来 的 那个 p 元 素 的 引用 。 现 
在 ， 虽然 这 个 新 创建 出 来 的 p 元 素 已 经 存在 了 ， 但 它 还 不 是 任何 一 棵 
DOM 节 点 树 的 组 成 部 分 ， 它 只 是 游荡 在 JavaScript 世 界 里 的 一 个 孤儿 。 
它 这 种 情况 称 为 文档 雄 片 (document fragment)， 还 无 法 显示 在 浏览 器 的 
0 画面 里 。 不 过 ， 它 已 经 像 任何 其 他 的 节点 那样 有 了 自己 的 DOM 属 
这 个 无 家 可 归 的 p 元 素 现 在 已 经 有 一 个 hodeType 和 一 个 nodeName 
值 ， 如 图 7-6 所 示 。 这 一 事实 可 以 用 下 面 这 段 代 码 来 验证 (把 以 下 代码 
放 入 example .js 文件 并 在 浏览 器 里 刷新 test .html 文档 ) 。 


window.onload = function() { 
var para = document.createElement("p"); 
var info = "nodeName: "; 
info+= para.nodeName ; 


info+= " nodeType: "; 
info+= para.nodeType; 
alert(info); 


nodeName: P nodeType: 1 
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图 7-6 


狐 节 挟 确 实 已 经 存在 ， 它 有 一 个 取 值 为 P 的 nodeName 属性 。 它 还 有 
一 个 取 值 为 1 的 nodeType 属性 ， 而 这 意味 着 它 古 一 个 元 素 节 感 。 不 
过 ， 这 个 贡 反 现在 还 未 被 连接 到 test .html 文档 的 节点 树 上 。 


7.2.2 appendchild 方法 


把 新 创建 的 节点 插入 某 个 文档 的 节点 树 的 最 简单 的 办 法 是 ， 让 它 成 为 
这 个 文档 某 个 现 有 市 扩 的 一 个 子 节 抬 。 


具体 到 这 个 例子 ， 是 要 把 一 段 狐 文 本 搬入 到 test .html 文档 中 id 是 
testdiyv 的 元 素 节 点 。 换 名 话说， 我 想 让 新 创建 的 p 元 素 成 为 
testdiv 元 素 的 一 个 子玉 点 。 你 可 以 用 appendChild 方法 来 完成 这 
一 任务 。 下 面 是 appendChild 方法 的 语法 : 


parent.appendchild(child) 


具体 到 test .html 文档 这 个 例子 ， 上 面 这 个 语法 中 的 child 就 是 刚 
才 用 createElement 方法 创建 出 来 的 ，parent 束 是 id 是 testdiv 
的 元 素 节 点。 我 需要 用 一 个 DOM 方 法 得 到 “testdiv" 节 点 ， 最 简单 的 办 
法 是 使 用 getElementById 方法 。 


像 往 第 一 样 ， 你 把 这 个 元 素 赋 给 一 个 要 量 ， 这 可 以 让 你 的 代码 简明 易 


var testdiv = document.getElementById("testdiv"); 


变量 testdiyv 现在 包含 着 一 个 指向 那个 id 等 于 testdiv 的 元 素 的 引 
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在 上 一 小 节 我 创建 了 一 个 para 变量 ， 它 包含 一 个 指向 刚 创建 的 那个 p 
元 素 的 引用 : 


var para = document .createElement("p" ) ; 


有 了 这 些 ， 束 可 以 像 下 面 这 样 用 appendchild 方法 把 变量 para 插入 


变量 testdiv 了 : 


testdiv,appendCchild(para) ，; 


新 创建 的 p 元 素 现在 成 为 了 testdiyv 元 素 的 一 个 子 节点 。 它 不 再 是 
JavaScript 世 界 里 的 一 个 孤儿 ， 它 已 经 被 插入 到 test .html 文档 的 市 点 
树 里 了 。 


在 使 用 appendChild 方法 时 ， 不 必 非 得 使 用 一 些 变 量 来 引用 父 玉 点 和 
子玉 把。 事实 上 ， 完 全 可 以 把 上 面 这 条 语句 写成 下 面 这 样 : 


document .getElementById("testdiv").appendcChild( 


document .createElement("p")); 


可 以 看 到 ， 上 面 这 样 的 代码 很 难 阅读 和 理解 。 像 下 面 这 样 多 写 儿 行 ， 
从 长 远 来 看 十 值得 的 : 


var para = document.createElement("p"); 
var testdiv = document .getElementById("testdiv"); 


testdiv.appendcChild(para); 


7.2.3 createTextNode 方法 


你 现在 已 经 创建 出 了 一 个 元 素 节点 并 把 它 插入 了 文档 的 节点 树 ， 这 个 
节点 是 一 个 空白 的 p 元 素 。 你 想 把 一 些 文本 放 入 这 个 p 元 素 ， 但 
createElement 方法 帮 不 上 忙 ， 它 只 能 创建 元 素 节 点 。 你 需要 创建 
一 个 文本 节点 ， 你 可 以 用 createTextNode 方法 来 实现 它 。 


注意 ” 千 万 不 要 被 这 些 方法 的 名 字 弄 糊涂 。 如 果 这 些 方法 叫做 
createElementNode 和 createTextNode ， 或 者 叫做 
createElement 和 createText ， 都 会 非常 清楚 。 遗 憾 的 是 ， 
它们 的 名 字 叫 做 createElement 和 createTextNode 。 


createTextNode 的 语法 与 createElement 很 相似 : 


document .createTextNode( text) 


下 面 这 条 语句 将 创建 出 一 个 内 容 为 “Hello world" 的 文本 节点 : 


document .createTextNode("Hello world"); 


和 刚才 一 样 ， 把 这 个 者 创建 的 节点 也 赋 给 一 个 变量 : 


var txt = document.createTextNode("Hello world"); 


变量 txt 现在 包含 指 回 新 创建 的 那个 文本 和 点 的 引用 。 这 个 和 点 现在 
人 因为 它 还 未 被 插入 任何 一 个 文档 的 
节点 树 。 


可 以 用 appendChild 方法 把 这 个 文本 节点 插入 为 某 个 现 有 元 素 的 子 节 
点 。 我 将 把 这 个 文本 节点 插入 到 我 在 上 一 小 节 创 建 的 p 元 素 。 因 为 在 上 
一 小 节 里 我 已 经 把 那个 p 元 素 存 入 了 变量 para ， 现 在 又 把 新 创建 的 文 
本 节点 存 入 了 变量 txt ， 所 以 现在 可 以 用 下 面 这 条 语句 来 达到 我 的 目 
的 : 


para.appendchild(txt); 


内 容 为 “Hello world” 的 文本 节点 就 成 为 那个 p 元 素 的 一 个 子 节 点 了 。 
现在 ， 试 着 把 下 面 这 段 代 码 写 入 example .js 文件 : 


window.onload = function() { 
var para = document.createElement("p"); 
var testdiv = document.getElementById("testdiv"); 
testdiv.appendchild(para); 


var txt = document.createTextNode("Hello world"); 
para.appendchild(txt); 


然后 在 浏览 器 里 重新 加 载 test ,html 文件 ， 你 会 从 浏览 器 窗口 里 看 到 
文本 “Hello world”， 如 图 7-7 所 示 。 


AAA Testing 


OOM ro: 


Hello world 


图 7-7 

这 个 例子 是 按照 以 下 顺序 来 创建 和 插入 节点 的 : 

(1) 创建 一 个 p 元 素 季 上 感 。 

(2) 把 这 个 p 元 素 节 点 追加 到 test .html 文档 中 的 一 个 元 素 节点 上 。 
(3) 创建 一 个 文本 节点 。 

(4) 把 这 个 文本 节点 追加 到 刚才 创建 的 那个 p 元 素 节点 上 。 


appendChild 方法 还 可 以 用 来 连接 那些 尚未 成 为 文档 树 一 部 分 的 市 
点 。 也 就 是 说 ， 以 下 步骤 顺序 同样 可 以 达到 目的 。 


(1) 创建 一 个 p 元 素 闻 把。 

(2) 创建 一 个 文本 节点 。 

(3) 把 这 个 文本 点 追加 到 第 1 步 创建 的 p 元 素 节 点 上 。 

(4) 把 这 个 p 元 素 节 点 追加 到 test .html 文档 中 的 一 个 元 素 节点 上 。 


下 面 是 按照 狐 步 又 编写 出 来 的 钞 数 : 


window.onload = function() { 
var para = document.createElement("p"); 
var txt = document.createTextNode("Hello world"); 
para.appendchild(txt); 


var testdiv = document.getElementById("testdiv"); 
testdiv.appendchild(para); 


最 终 的 结果 是 一 样 的 。 把 上 面 这 些 代 码 写 入 example.js 文件， 并 在 
浏 蜗 絮 里 重新 加 载 test ,html 文件 。 你 会 看 到 文本 “Hello world”， 整 
像 刚 才 一 样 。 

7.2.4 ”一 个 更 复杂 的 组 合 


刚才 介绍 innerHTML 属性 时 ， 我 使 用 了 如 下 所 示 的 HTML 内 容 : 


<p>This is <em>my</em> content.</p> 


与 创建 一 个 包含 着 一 些 文本 的 p 元 素 相 比 ， 这 个 步骤 要 复杂 不 少 。 为 了 
把 这 些 标记 插入 test .html 文档 ， 和 爷 把 它 转换 为 一 柠 节 点 树 。 


This is em content. 


图 7-8 


如 图 7-8 所 示 ， 这 些 HTML 内 容 对 应 着 一 个 p 元 素 太 点， 它 本 刁 又 包含 
着 以 下 子 节 点 。 
。 一 个 文本 全 点 ， 其 内 容 是 “This is” 
。 一 个 元 素 节 点 “em”， 这 个 元 素 太 点 本 身 还 包含 着 一 个 文本 节点 ， 
其 内 容 是 “my” 
。 一 个 文本 和 点 ， 其 内 容 是 “content.” 


| 我 们 能 制定 出 一 个 妥善 的 行动 
计划 。 


(1) 创建 一 个 p 元 素 节 点 并 把 它 赋 给 变量 para 。 

(2) 创建 一 个 文本 节点 并 把 它 赋 给 变量 txt1。 

(3) 把 txt1 追加 到 para 上 。 

(4) 创建 一 个 em 元 素 广 点 并 把 它 赋 给 变量 emphasis 。 


(5) 创建 一 个 文本 节点 并 把 它 赋 值 给 变量 txt2。 


(6) 把 txt2 追加 到 emphasis 上 。 

(7) 把 emphasis 追加 到 para 上 。 

(8) 创建 一 个 文本 节点 并 把 它 赋值 给 变量 txt3 。 

(9) 把 txt3 追加 到 para 上 。 

(10) 把 para 追加 到 test ,html 文档 中 的 testdiv 元 素 上 。 
下 面 是 根据 上 述 步骤 编写 出 来 的 JavaScript 代 码 ; 


window.onload = function() { 
var para = document.createElement("p"); 
var txt1 = document.createTextNode("This is "); 
para.appendchild( txt1); 
var emphasis = document.createElement ("em"); 
Var txt2 = document.createTextNode("my"); 
emphasis.appendCchild(txt2); 
para.appendchild(emphasis ) ; 


Var txt3 = document ,createTextNode(” content."); 
para.appendchild( txt3); 

var testdiv = document.getElementById("testdiv"); 
testdiv.appendchild(para); 


把 上 面 这 些 代码 写 入 example .js 文件 ， 然 后 在 浏览 器 里 重新 加 载 
test.,html 文档 。 


如 果 你 愿意 ， 可 以 采用 一 种 不 同 的 方案 。 可 以 先 把 所 有 的 节点 都 创建 
出 来 ， 然 后 再 把 它们 连接 在 一 起 。 下 面 是 按照 这 一 思路 制定 出 来 的 行 
动 计划 。 

(1) 创建 一 个 p 元 素 节 点 并 把 它 赋值 给 变量 para 。 

(2) 创建 一 个 文本 和 点 并 把 它 赋值 给 变量 txt1 。 

(3) 创建 一 个 em 元 素 节 点 并 把 它 赋值 给 变量 emphasis 。 


(4) 创建 一 个 文本 节点 并 把 它 赋 值 给 变量 txt2。 


(5) 创建 一 个 文本 市 点 并 把 它 赋值 给 变量 txt3 。 

(6) 把 txt1 人 退 加 到 para 上 。 

(7) 把 txt2 追加 到 emphasis 上 。 

(8) 把 emphasis 追加 到 para 上 。 

(9) 把 txt3 人 退 加 到 para 上 。 

(10) 把 para 追加 到 test ,html 文档 中 的 testdiv 元 素 上 。 
下 面 是 根据 上 述 步骤 编写 出 来 的 JavaScript 代 码 : 


window.onload = function() { 
var para = document.createElement("p"); 
var txt1 = document.createTextNode("This is "); 
var emphasis = document.createElement ("em"); 
Var txt2 = document.createTextNode( "my"); 
Var txt3 = document.createTextNode(" content."); 
para.appendchild( txt1); 


emphasis.appendChild( txt2); 
para.appendCchild(emphasis); 
para.appendchild(txt3); 

var testdiv = document.getElementById("testdiv"); 
testdiv.appendchild(para); 


如 果 把 上 面 这 些 代码 写 入 example .js 文件 ， 然 后 在 浏览 器 里 重新 加 
载 test .html 文档 ， 将 看 到 与 前 面 一 模 一 样 的 结果 。 


可 以 看 到 ， 把 新 市 点 插入 茶 个 文档 的 市 点 树 的 办 法 并 非 只 有 一 种 。 即 


使 决定 永远 也 不 使 用 document .write 方法 或 innerHTML 属性 ， 在 
使 用 DOM 方 法 去 创建 和 插入 新 节点 时 你 也 可 以 灵活 地 做 出 多 种 选择 。 


7.3” 重 回 图 片 库 


现在 ， 我 将 向 你 展示 一 个 动态 创建 HTML 内 容 的 实用 膝 例 。 在 上 一 章 
里 ， 我 们 对 图 乒 库 脚本 做 了 许多 改进 。 我 们 做 到 了 让 JavaScript 代 码 与 


HTML 分 离 ， 并 针对 各 种 情况 做 到 了 平稳 退化 ， 我 们 还 做 了 一 些 访问 性 
有 关 的 改进 。 


不 过 ， 还 有 一 些 内 容 让 我 感到 不 太 满 意 。 看 一 下 gallery .html 文件 
中 的 标记 : 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Image Gallery</title> 
<link rel="stylesheet" href="styles/layout.css" media="screen" /> 
</head> 
<body> 
<h1i>snapshots</h1> 
<U] id="imagegallery"> 
<1i> 
<a href="images/fireworks.jpg" title="A fireworks display"> 
<img src="images/thumbnail fireworks.jpg" alt="Fireworks" 


</a> 
</1i> 
<1i> 
<a href="images/coffee.jpg" title="A cup of black coffee" > 
<img src="images/thumbnail_ coffee.jpg" alt="Coffee" /> 
</a> 
</1i> 
< 二 > 
<a href="images/rose.jpg" title="A red, red rose"> 
<img src="images/thumbnail rose.jpg" alt="Rose" /> 
</a> 
</1i> 
<1i> 
<a href="images/bigben.jpg" title="The famous clock"> 
<img src="images/thumbnail bigben.jpg" alt="Big Ben" /> 
</a> 
</1i> 
</U]> 
<img id="placeholder" src="images/placeholder.gif" alt="my image 
gallery" /> 
<p id="description">Choose an image.</p> 
<script src="scripts/showpPic.js"></script> 
</body> 
</html> 


这 个 HTML 文件 中 有 一 个 图 片 和 一 段 文字 仅仅 是 为 showPic 脚本 服务 
的 。 阁 能 把 结构 和 行为 彻底 分 开 那 最 好 不 过 了 。 既然 这 些 元 素 的 存在 
ee 那么 用 DOM 方 法 来 创建 它们 才 是 最 合 
适 的 这 择 。 


第 一 步 非常 简单 ， 把 这 些 元 素 从 gallery .html 文档 里 删 掉 。 接 下 
来 ， 我 们 编写 一 些 JavaScript 代 码 把 它们 动态 地 创建 出 来 。 


我 们 先 编写 一 个 函数 preparePlaceholder 并 把 它 放 进 
showPic.js 文件 ， 然 后 在 文档 加 载 时 调用 这 个 函数 。 下 面 是 这 个 画 
数 要 完成 的 任务 。 

(1) 创建 一 个 img 元 素 节 点 。 

(2) 设置 这 个 下 点 的 id 属性 。 

(3) 设置 这 个 市 点 的 src 属性 。 

(4) 设置 这 个 市 点 的 alt 属性 。 

(5) 创建 一 个 p 元 素 习 点 。 

(6) 设置 这 个 斑点 的 id 属性 。 

(7) 创建 一 个 文本 节点 。 

(8) 把 这 个 文本 市 点 追加 到 p 元 素 上 。 

(9) 把 p 元 素 和 img 元 素 插 入 到 gallery .html 文档 。 

创建 这 些 元 素 和 设置 各 有 关 属 性 的 工作 比较 明确 。 我 们 在 这 里 组 合 使 


用 了 createElLlement() 、createTextNode( ) 和 
setAttribute( ) 方法 : 


var placeholder = document.createElement("img"”)， 
placeholder.setAttribute("id","placeholder"); 
placeholder.setAttribute("src","images/placeholder .gif"); 
placeholder .setAttribute("alt","my image gallery"); 

Var description = document.createElement("p"); 


description.setAttribute("id","description"); 
var desctext = document.createTextNode("Choose an image"); 


接 下 来 ,我们 用 appendCchild( ) 方法 把 新 创建 的 文本 市 点 插入 p 元 


NN，: 


description.appendchild(desctext); 


最 后 一 步 是 把 新 创建 的 元 素 捅 入 文档 。 很 凑巧 ， 因 为 图 片 清单 (<ul> 


. </ul> ) 刚好 是 文档 中 的 最 后 一 个 元 素 ， 所 以 如 果 把 
placeholder 和 description 元 素 追 加 到 body 元 素 节 点 上 上， 它们 
就 会 出 现在 图 片 清单 的 后 面 。 我 们 可 以 通过 标签 名 "body? 引 用 body 标 
签 (作为 第 一 个 也 是 唯一 一 个 body 元 素 的 引用 ) 。 


document .getElementsByTagName("body")[90].appendchild(placeholder); 


document .getElementsByTagName("body")[90].appendchild(description); 


当然 ， 也 可 以 使 用 HTML-DOM 提 供 的 属性 body : 


document .body.appendChild(placeholder); 


document .body.appendChild(description); 


这 两 组 语句 都 会 把 placeholder 和 description 元 素 插 入 到 位 于 文 
档 末 尾 的 </body> 标签 之 前 。 


以 上 代码 工作 得 很 好 ， 但 这 一 切 都 依赖 于 一 个 细节 : 图 片 清单 刚好 是 
<body> 部 分 的 最 后 一 个 元 素 。 如 果 在 这 个 图 片 清单 的 后 面 还 有 一 些 其 
他 的 内 容 该 怎么 办 ? 我 们 的 真实 想法 是 ， 主 新 创建 的 元 素 紧 跟 在 图 片 
清单 的 后 面 ， 而 不 管 这 个 清单 出 现在 文档 中 的 什么 地 方 。 


7.3.1 在 已 有 元 素 前 播 入 一 个 新 元 素 


DOM 提 供 了 名 为 insertBefore() 方法 ， 这 个 方法 将 把 一 个 新 元 素 
“0 在 调用 此 方法 时 ， 你 必须 告诉 它 三 件 
(1) 新 元 素 : 你 想 插 入 的 元 素 ( newElement ) 。 


(2) 目标 元 素 : 你 想 把 这 个 新 元 素 插 入 到 哪个 元 素 ( targetElement 
之 前 。 


(3) 父 元 素 : 目标 元 素 的 父 元 素 (parentElement ) 。 
下 面 是 这 个 方法 的 调用 语法 : 


parentElement.insertBefore(newElement, targetElement) 


我 们 不 必 搞 清楚 父 元 素 到 底 是 哪个 ， 因 为 targetElement 元 素 的 
parentNode 属性 值 就 是 它 。 在 DOM 里 ， 元 素 节 点 的 父 元 素 必 须 是 另 
一 个 元 素 下 点 (属性 节点 和 文本 市 点 的 子 元 素 不 允许 是 元 素 节 点 ) 。 


比如 说 ， 下 面 这 条 语句 可 以 把 placeholder 和 description 元 素 插 
On (还 记得 吗 ， 图 片 清单 的 jd 是 ijmagegallery 


var gallery = document .getElementById("imagegallery"); 


gallery.parentNode.insertBefore(placeholder, gallery); 


此 时 ， 变 量 gallery 的 parentNode 属性 值 是 pody 元 素 ， 所 以 
placeholder 元 素 将 被 插入 为 body 元 素 的 新 子 元 素 ， 它 被 插入 到 它 
的 兄弟 元 素 gallery 的 前 面 。 


还 可 以 把 description 元 素 也 插入 到 gallery 元 素 之 前 ， 成 为 它 的 


gallery.parentNode.insertBefore(description, gallery); 


在 gallery 清单 的 前 面 插入 placeholder 图 片 和 description 文 
本 段 的 效果 如 图 7-9 所 示 。 
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图 7-9 


这 种 效果 其 实 也 不 错 ， 但 我 们 刚才 说 的 是 把 新 创建 的 元 素 插入 到 图 片 
清单 的 后 面 ， 而 不 是 前 面 。 


7.3.2 ”在 现 有 元 素 后 播 入 一 个 新 元 素 


你 可 能 会 想 ， 既然 有 一 个 jnsertBefore 方法 ， 是 不 是 也 有 一 个 相应 
的 ijnsertAfter() 方法 。 很 可 惜 ，DOM 没 有 提供 这 个 方法 。 


01. 编写 jnsertAfter 画 数 


虽然 DOM 本 身 没 有 提供 InsertAfter 方法 ， 但 它 确 实 提 供 了 把 
一 个 节点 播 入 到 另 一 个 节点 之 后 所 需 的 所 有 工具 。 我 们 完全 可 以 
利用 已 有 的 DOM 方 法 和 属性 编写 一 个 insertAfter 函数 : 


function insertAfter(newElement, targetElement) { 
var parent = targetElement.parentNode; 
if (parent.lastchild == targetElement) { 
parent .appendchild(newElLement ); 


} else { 
parent.insertBefore(newElement, targetElement .nextSibling); 


这 个 函数 用 到 了 以 DOM 方法 和 属性 : 


。parentNode 属性 
。1lastchild 属性 
。appendchild 方法 
。 insertBefore 方法 
。nextSib1ling 属性 


下 面 ， 请 看 看 这 个 函数 是 如 何 一 步 一 步 地 完成 工作 的 。 
(1) 首先 ， 这 个 函数 有 两 个 参数 ， 一 个 是 将 被 插入 的 新 元 素 ， 男 一 


个 是 目标 元 素 。 这 两 个 参数 通过 变量 newElement 和 
targetElement 被 传递 到 这 个 函数 : 


function insertAfter(newElement, targetElement) 


(2) 把 目标 元 素 的 parentNode 属性 值 保存 到 变量 parent 里 : 


var parent = targetElement.parentNode 


(3) 接 下 来 ， 检 查 目 标 元 素 是 不 是 parent 的 最 后 一 个 子 元 素 ， 即 
比较 parent 元 素 的 lastchild 属性 值 与 目标 元 素 是 否 存在 “等 
于 ”关系 : 


if (parent.Jlastchild == targetElement) 


(4) 如 果 是 ， 就 用 appendchild 方法 把 新 元 素 追 加 到 parent 元 
素 上 ， 这 样 新 元 素 就 恰好 被 插入 到 目标 元 素 之 后 : 


parent.appendChild(newElement) 


(5) 如 采 不 是 ， 束 把 新 元 素 插 入 到 目标 元 泰和 目标 元 到 的 下 一 个 兄 
第 元 率 之 间 。 目 标 元 隶 的 下 一 个 兄弟 元 丸 即 目标 元 和 聚 的 
nextSibling 属性 。 用 insertBefore 方法 把 新 元 素 插入 到 目 
标 元 素 的 下 一 个 兄弟 元 素 之 前 : 


parent.insertBefore(newElement, targetElement.nextSibling) 


表面 上 看 ， 这 是 一 个 相当 复杂 的 函数 ， 但 只 要 把 它 分 成 几 个 小 部 
分 来 理解 ， 束 很 容易 摘 清 区。 即使 你 现在 还 不 能 完全 明日 也 不 要 
暴 。 等 你 对 insertAfter 函数 所 用 到 的 DOM 方 法 和 属性 更 加 熟 
悉 时 ， 你 目 然 殉 能 完全 理解 它 。 


类 似 于 第 6 章 出 现 的 addLoadEvent 函数 ，insertAfter 函数 也 
非常 实用 ， 应 该 把 它们 都 收 系 到 你 的 脚本 里 。 


02. 使 用 insertAfter 函数 


我 们 将 insertAfter 函数 用 在 我 的 preparePlaceholder 画 
数 中 。 首 先 ， 得 到 图 片 清单 : 


var gallery = document .getElementById("imagegallery"); 


接 下 来 ， 把 placeholder (这 个 变量 对 应 着 新 创建 出 来 的 jmg 
元 素 ) 插入 到 gallery 的 后 面 : 


insertAfter(placeholder, gallery); 


| | 


placeholder 图 片 现 在 成 了 gallery .html 文档 的 节点 树 的 组 
成 部 分 ， 而 我 们 希望 把 description 文本 段 插入 到 它 的 后 面 。 我 
们 已 经 把 这 个 节点 保存 在 变量 description 里 了 。 再 次 使 用 
insertAfter() 方法 ， 但 这 次 是 把 description 插入 到 
placeholder 的 后 面 : 


insertAfter(description, placeholder); 


增加 了 上 面 这 几 条 语句 之 后 ，preparePlaceholder 函数 变 成 
了 如 下 的 样子 : 


function preparePlaceholder() { 
var placeholder = document.createElement("img"); 
placeholder.setAttribute("id","placeholder"); 
placeholder.setAttribute("src","images/placeholder .gif"); 
placeholder.setAttribute("alt","my image gallery"); 
var description = document.createElement("p"); 
description,.setAttribute("id","description"); 
var desctext = document.createTextNode("Choose an image"); 
description.appendchild(desctext); 
var gallery = document.getElementById("imagegallery"); 
insertAfter(placeholder, gallery); 
insertAfter(description,placeholder); 


事情 还 未 结束 ， 这 个 函数 还 有 最 后 一 个 问题 没有 解决 : 我 在 新 增 
加 的 那儿 条 语句 里 使 用 了 一 些 新 的 DOM 方 法 ， 但 没有 测试 浏览 器 
征 否 文 持 它们 。 为 了 确保 这 个 函数 有 足够 的 退路 ， 还 需要 再 增加 


几 条 语句 : 


function preparePlaceholder() { 
if (!document.createElement) return false; 
if (!document.createTextNode) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery")) return false; 
var placeholder = document.createElement("img"); 
placeholder.setAttribute("id","placeholder"); 


placeholder.setAttribute("src","images/placeholder .gif"); 
placeholder.setAttribute("alt","my image gallery"); 

var description = document.createElement("p"); 
description.setAttribute("id","description"); 

var desctext = document.createTextNode("Choose an image"); 
description.appendchild(desctext); 

var gallery = document .getElementById("imagegallery"); 
insertAfter(placeholder, gallery); 
insertAfter(description,placeholder); 


7.3.3 图片 库 二 次 改进 版 
现在 showPic ,js 文件 包含 5 个 不 同 的 函数 ， 它 们 起: 


。addLoadEvent 函数 

。 insertAfter 函数 
。preparePlaceholder 函数 
。prepareGallery 函数 

。 showPic 函数 


addLoadEvent 和 insertAfter 属于 通用 型 函数 ， 它 们 在 许多 场合 
都 能 派 上 用 场 。 


preparePlaceholder 函数 负责 创建 一 个 img 元 素 和 一 个 p 元 素 。 
这 个 函数 将 把 这 些 新 创建 的 元 素 插入 到 节点 树 里 图 片 库 清 单 的 后 面 。 
prepareGallery 函数 负责 处 理事 件 。 这 个 贡 数 将 过 历 处 理 图 片 库 浓 
单 里 的 每 个 链接 。 当 用 户 点 击 这 些 链 接 中 的 某 一 个 时 ， 就 会 调用 
showPic 函数 。 


showPic 函数 负责 把 “ 占 位 符 ” 图 片 切 换 为 目标 图 片 。 


为 了 启用 这 些 功能 ， 用 addLoadEvent 函数 调用 
preparePlaceholder 和 prepareGallery 函数 。 


addLoadEvent (preparePlaceholder); 


addLoadEvent (prepareGallery); 


下 面 是 最 终 完 成 的 ShowPic .js 文件 : 


function addLoadEvent(func) { 
var oldonload = window.onload; 


if (typeof window.onload != 'function') { 
window.onload = func; 
} else { 
window.onload = function() { 
oldonload( ); 
func( ) ， 
} 


} 


function insertAfter(newElement, targetElement) { 
var parent = targetElement .parentNode; 
if (parent.lastcChild == targetElement) { 
parent.appendChild(newElement ); 
} else { 
parent.insertBefore(newElement, targetElement.nextSibling); 


} 
} 


function preparePlaceholder() { 
if (!document.createElement) return false; 
if (!document.createTextNode) return false; 
if (!document .getE1LementById) return false; 
if (!document.getElementById("imagegallery")) return false; 
var placeholder = document.createElement("img"); 
placeholder.setAttribute("id","placeholder"); 
placeholder.setAttribute("src","images/placeholder .gif"); 
placeholder.setAttribute("alt", "my image gallery"); 
var description = document.createElement("p"); 
description,.setAttribute("id","description"); 
var desctext = document.createTextNode("Choose an image"); 
description.appendCchild(desctext); 
var gallery = document.getElementById("imagegallery"); 
insertAfter(placeholder, gallery); 
insertAfter(description,placeholder ) ; 


} 


function prepareGallery() { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery")) return false; 
var gallery = document .getElementById("imagegallery"); 
var links = gallery.getElementsByTagName("a"); 
for ( var i=0; i < links.length; i++) { 
links[i].onclick = function() { 


return ShowPic(this ) ， 
links[i].onkeypress = links[i].onclick; 
} 


function ShowPic(whichpic) { 
if (!document.getElementById("placeholder")) return true; 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder.setAttribute("src", source); 
if (!document.getElementById("description")) return false; 
if (whichpic.getAttribute("title")) { 
Var text = whichpic.getAttribute("title"); 
} else { 
Var text = ""; 
} 
var description = document.getElementById("description"); 
if (description.firstChild.nodeType == 3) { 
description,.firstCchild,nodevalue = text; 


return false; 


} 
addLoadEvent (preparePlaceholder); 
addLoadEvent(prepareGallery); 


JavaScript 代 码 增加 了 ， 但 标记 相应 的 减少 了 。gallery .html 文件 现 
在 只 包含 一 个 由 JavaScript 脚 本 和 CSS 样 式 表 共用 的 “挂钩 ”。 这 个 “ 挂 
钩 ? 融 是 图 片 清单 的 id 属性 。 


<1DOCTYPE html> 
<html> 
<head> 


<meta http-equiv="content-type" content="text/html; charset=utf- 
8" /> 

<title>Image Gallery</title> 

<link rel="stylesheet" href="styles/layout.css" media="screen" /> 
</head> 


<body> 
<h1i>Ssnapshots</h1> 
<U] id="imagegallery"> 
<1i> 


<a href="images/fireworks.jpg" title="A fireworks display"> 
<img src="images/thumbnail fireworks.jpg" alt="Fireworks" /> 
</a> 
</1i> 
<1i> 


<a href="images/coffee.jpg" title="A cup of black coffee" > 
<img src="images/thumbnail coffee.jpg" alt="Coffee" /> 
</a> 
</1i> 
<1i> 
<a href="images/rose.jpg" title="A red, red rose"> 
<img src="images/thumbnail_rose.jpg" alt="Rose" /> 
</a> 
</1i> 
<1i> 
<a href="images/bigben.jpg" title="The famous clock"> 
<img src="images/thumbnail bigben.jpg" alt="Big Ben" /> 
</a> 
</1i> 
</ul> 
<script src="scripts/showpPic.js"></script> 
</body> 
</html> 


现在 ， 图 片 库 的 结构 、 样 式 和 行为 已 经 彻底 分 离 了 。 


把 gallery ,html 文件 加 载 到 web 浏览 器 里 。 如 图 7-10 所 示 ， 你 将 看 
到 placeholder 图 片 和 description 文本 段 ， 它 们 已 被 插入 到 
ijmagegallery 清单 后 面 。 
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图 7-10 

我 们 用 JavaScript 动 态 地 创建 了 标记 并 把 它们 添加 到 了 文档 里 。 
JavaScript 还 对 图 片 清单 里 的 所 有 链接 进行 了 预 处 理 。 你 可 以 点 击 任何 
一 个 缩 略 图 去 体验 一 下 这 个 图 片 库 ， 如 图 7-11 所 示 。 
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图 7-11 


到 目前 为 止 ， 我 们 创建 的 这 些 新 内 容 对 这 个 页 面 来 说 并 不 算是 新 的 。 
比如 ， 页 面 加 载 后 ， 标 记 中 就 已 经 存在 title 属性 了 。 而 通过 
createElement 添加 的 新 段落 也 是 基于 棚 入 在 脚本 中 的 标记 添加 
的 。 实 际 上 ， 我 们 创建 的 所 有 一 切 都 包含 在 了 初始 的 页 面 当 中 。 只 不 
过 我 们 通过 脚本 对 它们 进行 了 一 番 重 排 而 已 。 怎 么 才能 真正 得 到 原来 
并 不 存在 于 初始 页 面 中 的 内 容 呢 ? 下 面 我 们 就 给 出 一 种 解决 方案 。 


7.4 Ajax 


2005 年 ，Adaptive Path 公 司 的 Jesse James Garrett 发 明了 Ajax 这 个 词 ， 用 
于 概括 异步 加 载 页 面 内 容 的 技术 。 以 前 ，Web 应 用 都 要 涉及 大 量 的 页 面 
刷新 : 用 户 点 击 了 某 个 链接 ， 请 求 发 送 回 服务 硝 ， 然 后 服务 硕 根 据 用 
户 的 操作 再 返回 新 页 面 。 即 便 用 户 看 到 的 只 是 页 面 中 的 一 小 部 分 有 变 
化 ， 也 要 刷新 和 重新 加 载 整个 页 面 ， 包 括 公 司 标志 、 导 航 、 头 部 区 

域 、 脚 部 区 域 等 。 


使 用 Ajax 束 可 以 做 到 只 更 新 页 面 中 的 一 小 部 分 。 其 他 内 容 一 一 标志 、 
导航 、 头 部 、 脚 部 ， 都 不 用 重新 加 载 。 用 户 仍 然 像 往常 一 样 点 击 链 
接 ， 但 这 一 次 ， 已 经 加 载 的 页 面 中 只 有 一 小 部 分 区 域 会 更 新 ， 而 不 必 
再 次 加 载 整个 页 面 了 。 


Ajax 的 主要 优势 就 是 对 页 面 的 请 求 以 异步 方式 发 送 到 服务 器 。 而 服务 
器 不 会 用 整个 页 面 来 响应 请 求 ， 它 会 在 后 台 处 理 请 求 ， 与 此 同时 用 户 
还 能 继续 浏览 页 面 并 与 页 面 交 互 。 你 的 脚本 则 可 以 按 需 加 载 和 创建 页 
面 内 容 ， 而 不 会 打 断 用 户 的 浏览 体验 。 利 用 Ajax，Web 应 用 可 以 呈现 出 
、 ` 类 似 桌 面 应 用 般 的 体验 ， 就 像 你 使 用 谷歌 地 图 
时 的 感觉 一 样 。 


和 任何 新 技术 一 样 ，Ajax 有 它 目 己 的 适用 范围 。 它 依赖 JavaScript， 所 
8 浏览 右 不 文 持 它 ， 而 搜索 引擎 的 蜘蛛 程序 也 不 会 抓 取 到 有 
谷 O 


7.4.1 XMLHttpRequest 对 象 


Ajax 技术 的 核心 就 是 XMLHttpRequest 对 象 。 这 个 对 象 充 当 着 浏览 器 
中 的 脚本 〈 客 户 端 ) 与 服务 器 之 间 的 中 间 人 的 角色 。 以 往 的 请 求 都 由 
浏览 器 发 出 ， 而 JavaScript 通 过 这 个 对 象 可 以 自己 发 送 请 求 ， 同 时 也 自 
已 处 理 响 应 。 


虽然 有 关 XMLHttpRequest 对 象 的 标准 还 比较 新 (参见 HTML5) ， 
但 这 个 对 象 的 历史 可 谓 久 远 ， 因 而 得 到 了 几乎 所 有 现代 浏览 器 的 支 

持 。 但 问题 是 ， 不 同 浏览 器 实现 XMLHttpRequest 对 象 的 方式 不 太一 
样 。 为 了 保证 跨 浏 览 器 ， 你 不 得 不 为 同样 的 事情 写 不 同 的 代码 分 支 。 


下 面 我 们 举 一 个 例子 ， 把 以 下 代码 保存 为 ajax.html : 


<!IDOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="utf-8" /> 
<title>Ajax</title> 

</head> 

<body> 


<div id="new"></div> 


<script src="scripts/addLoadEvent.js"></script> 
<script src="scripts/getHTTPObject.js"></script> 
<script src="scripts/getNewContent.js"></script> 


这 个 HTML 文 件 包 含 的 addLoadEvent .js 文件 位 于 scripts 文件 夹 
中 ， 该 文件 夹 里 还 有 男 外 两 个 新 脚本 : getHTTPObject .js 和 


getNewContent.js ° 


Ee 在 ajax.html 文件 的 卷 边 创 建 一 个 
example .txt 文件， 包含 如 下 内 容 : 


This was loaded asynchronously! 


a 多 数 情 况 下， 服务 器 端 脚本 在 
报到 请 求 后 会 做 一 番 处 理 再 输出 结果 。 但 这 里 我 们 只 是 为 了 演示 
说 明 ， 潜入 浆 全 复杂 接 下 来 我 们 就 编写 getHTTPObject .js 和 
getNewContent , js 这 两 个 脚本 。 


微软 最 早 在 IE5 中 以 ActiveX 对 象 的 形式 实现 了 一 个 名 叫 XMLHTTP 的 对 
象 。 在 正中 创建 新 的 对 象 要 使 用 下 列 代码 : 


var request = new ActiveXObject("Msxml12.XMLHTTP.3.0"); 
var request = new XMLHttpRequest(); 


更 麻烦 的 是 ， 不 同 下 版 本 中 使 用 的 XMLHTTP 对 象 也 不 完全 相同 。 为 了 
兼容 所 有 浏览 器 ，getHTTPObject .js 文件 中 的 getHTTPObject 
函数 要 这 样 来 写 : 


function getHTTPObject() { 
if (typeof XMLHttpRequest == "undefined") 
XMLHttpRequest = function () { 
try { return new ActiveXOobject("Msxml2.XMLHTTP.6.0"); } 
catch (e) 全 
try { return new ActiveXOobject("Msxm]l2.XMLHTTP.3.0"); } 
catch (e) 全 


try { return new ActiveXOobject("Msxml2.XMLHTTP"); } 
catch (e) 全 
return false; 


} 
return new XMLHttpRequest(); 


getHTTPObject 通过 对 象 检测 技术 检测 了 XMLHttpRequest 。 如 果 
失败 ， 则 继续 检测 其 他 方法 ， 最 终 返 回 false 或 一 个 新 的 
XMLHttpRequest (或 XMLHTTP ) 对 象 。 


这 样 ， 在 你 的 脚本 中 要 使 用 XMLHttpRequest 对 象 时 ， 可 以 将 这 个 新 
对 和 象 直接 赋值 给 一 个 变量 : 


var request = getHTTPObject(); 


XMLHttpRequest 对 象 有 许多 的 方法 。 其 中 最 有 用 的 是 open 方法 ， 
它 用 来 指定 服务 器 上 将 要 访问 的 文件 ， 指 定 请 求 类 型 : GET 、POST 或 
SEND 。 这 个 方法 的 第 三 个 参数 用 于 指定 请 求 是 否 以 异步 方式 发 送 和 处 
理 。 


在 getNewContent .js 文件 中 添加 下 列 代码 : 


function getNewContent() { 
var request = getHTTPObject(); 
if (request) { 
request.open( "GET", "example.txt", true ); 
request.onreadystatechange = function() { 
if (request.readyState == 4) { 
var para = document.createElement("p"); 
var txt = document.createTextNode(request.responseText); 
para.appendchild(txt); 


document .getEJementById( 'new').appendCchild(para) ， 
} 


}; 
request.send(null); 
} else { 
alert('Sorry, your browser doesn\'t support XMLHttpRequest'); 


} 


} 
addLoadEvent (getNewContent); 


当 页 面 加 载 完成 后 ， 以 上 代码 会 发 起 一 个 GET 请 求 ， 请 求 与 
ajax,html 文件 位 于 同一 目录 的 example .txt 文件 。 


request.open( "GET", "example.txt", true ); 


代码 中 的 onreadystatechange 是 一 个 事件 处 理 函 数 ， 它 会 在 服务 
器 给 XMLHttpRequest 对 象 送 回 响应 的 时 候 被 触发 执行 。 在 这 个 处 理 
函数 中 ， 可 以 根据 服务 器 的 具体 响应 做 相应 的 处 理 。 


在 此 ， 我 们 给 它 指定 了 一 个 处 理 芳 数 : 


request.onreadystatechange = function() { 


// 处 理 响 应 
}; 


当然 ， 也 可 以 引用 一 个 函数 。 下 面 的 代码 怠 会 在 
onreadystatechange 被 触发 时 执行 名 为 doSomething 的 函数 : 


注意 ”在 为 onreadystatechange 指定 函数 引用 时 ， 不 要 在 函 
数 名 后 面 加 括号 。 因 为 加 括号 表示 立即 调用 函数 ， 而 我 们 在 此 只 

想 把 函数 自身 的 引用 (而 不 是 函数 结果 ) 赋值 给 onreadystate- 
change 属性 。 


request.onreadystatechange = doSomething; 


在 指定 了 请 求 的 目标 ， 也 明确 了 如 何 处 理 啊 应 之 后 ， 束 可 以 用 send 方 
法 来 发 送 请 求 了 : 


request.send(null); 


如 果 浏 览 器 不 支持 XMLHttpRequest 对 象 ，getHTTPObject 函数 会 
返回 false ， 因 此 你 还 要 处 理 好 这 种 情况 。 


服务 器 在 向 XMLHttpRequest 对 象 发 回响 应 时 ， 该 对 象 有 许多 属性 可 
J 浏览 器 会 在 不 同 阶段 更 新 readyState 属性 的 值 ， 它 有 5 个 可 能 的 


0 表示 未 初始 化 
1 表示 正在 加 载 
2 表示 加 载 完 毕 
3 表示 正在 交互 
。 4 表示 完成 


0 属性 的 值 变 成 了 4， 就 可 以 访问 服务 器 发 运 回 来 的 数 
让 古国。 


访问 服务 絮 发 送 回 来 的 数据 要 通过 两 个 属性 完成 。 一 个 是 
responseText 属性 ， 这 个 属性 用 于 保存 文本 字符 串 形式 的 数据 。 田 
一 个 属性 是 responseXML 属性 ， 用 于 保存 Content -Type 头 部 中 指 
定 为 "text/xm1l" 的 数据 ， 其 实 是 一 个 DocumentFragment 对 象 。 
你 可 使 用 各 种 DOM 方 法 来 处 理 这 个 对 象 。 而 这 也 正 是 
XMLHttpRequest 这 个 名 称 里 有 XML 的 原因 。 


在 这 个 例子 中 ，onreadystatechange 事件 处 理 函 数 在 等 到 
readyState 值 变 成 4 之 后 ， 束 会 从 responseText 属性 里 取得 文本 
数据 ， 然 后 把 数据 放 到 一 个 段落 中 ， 再 将 新 段落 添加 到 DOM 里 : 


request.onreadystatechange = function() { 
if (request.readyState == 4) { 
var para = document.createElement("p"); 
var txt = document.createTextNode(request.responseText); 
para.appendchild(txt); 


document .getElementById( 'new').appendchild(para) ， 
} 
} 


此 时 ，example .txt 文件 中 的 文本 内 容 就 会 出 现在 id 为 new 的 div 
元 素 中 ， 如 图 7-12 所 示 。 
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图 7-12 


注意 ”在 使 用 Ajax 时 ， 千 万 要 注意 同 源 策略 。 使 用 
XMLHttpRequest 对 象 发 送 的 请 求 只 能 访问 与 其 所 在 的 HTML 处 
于 同一 个 域 中 的 数据 ， 不 能 向 其 他 域 发 送 请 求 。 此 外 ， 有 些 浏 览 
句 还 会 限制 Ajax 请 求 使 用 的 协议 。 比 如 在 Chrome 中 ， 如 果 你 使 用 
file:// 协 议 从 自己 的 硬盘 里 加 载 example .txt 文件 ， 就 会 看 

到 “Cross origin requests are only supported for HTTP”( 跨 域 请 求 只 
支持 HTTP 协 议 ) 的 错误 消息 。 


异步 请 求 有 一 个 容易 被 忽略 的 问题 是 异步 性 ， 就 是 脚本 在 发 送 
XMLHttpRequest 请 求 之 后 ， 仍 然 会 继续 执行 ， 不 会 等 待 响应 返回 。 


为 了 证 明 这 一 点 ， 可 以 在 request .onreadystatechange 处 理 函 数 
中 和 getNewContent 函数 的 最 后 各 诡 加 一 个 警告 框 : 


function getNewContent () { 
var request = getHTTPObject(); 
if (request) { 
request.open( "GET", "example.txt", true ); 
request.onreadystatechange = function() { 
if (request.readyState == 4) { 
alert("Response Received"); 
var para = document.createElement("p"); 
var txt = document.createTextNode(request.responseText); 
para.appendchild(txt); 
document .getElementById( 'new').appendchild(para); 


}; 
request.send(null); 
} else { 
alert('Sorry, your browser doesn\'t support XMLHttpRequest'); 


alert("Function Done"); 


} 
addLoadEvent (getNewContent); 


现在 加 载 一 下 页 面试 武 ， 很 可 能 显示 “Function Done” 的 警告 框 会 完 
于 “Response Received” 的 警告 框 出 现 。 这 就 证 明了 脚本 不 会 等 待 send 
的 响应 ， 而 是 会 继续 执行 。 之 所 以 说 “很 可 能 ”， 是 因为 有 时 候 服务 器 
的 啊 应 也 会 非常 快 。 如 果 你 是 从 本 地 人 硬盘 上 加 载 文 件 ， 请 求 和 响应 几 
平 会 同时 发 生 。 而 如 果 是 从 手机 浏览 妖 中 加 载 页面 ， 那 么 在 收 到 响应 
之 前 钨 怕 就 要 等 很 长 时 间 。 


为 此 ， 如 果 其 他 脚本 依赖 于 服务 器 的 响应 ， 那 么 就 得 把 相应 的 代码 都 
转移 到 指定 给 onreadystatechange 属性 的 那个 函数 中 。 上 面 例子 
中 添加 DOM 元 素 的 代码 就 是 一 个 例子 。 


XMLHttpRequest 对 象 实际 上 是 非常 简单 的 ， 也 没有 什么 值得 大 书 特 
es 。 不 过 ， 只 要 发 挥 一 点 想象 力 ， 你 就 可 以 通过 它 达成 令 人 炫 
目的 效果 。 


Ajax 之 挑战 


总 的 来 说 ，Ajax 技 术 还 是 给 我 们 之 了 很 多 好 处 。 利 用 它 ， 可 以 增 
强 站 点 的 可 用 性 ， 用 户 无 须 刷新 页 面 ， 从 而 可 以 很 快 地 得 到 呆 
应 。 但 与 此 同时 ， 这 个 新 技术 也 给 我 们 提出 了 一 些 挑 战 。 


Ajax 应 用 的 一 个 特色 可 是 减少 重复 加 载 页 面 的 次 效 。 但 这 种 缺少 
状态 记 杂 的 技术 会 与 浏览 器 的 一 些 使 用 惯例 产生 冲突 ， 导 致 用 户 
无 法 使 用 后 退 按钮 或 者 无 法 为 特定 状态 下 的 页 面 添加 书签 。 


只 更 新 部 分 页 面 区 域 的 特性 也 会 影响 到 用 户 的 预期 。 理 想 情况 ， 

用 户 的 每 一 次 操作 都 应 该 得 到 一 个 清晰 明确 的 结果 。 为 此 ，Web 设 

人 
提示 。 


要 构建 成 功 的 Ajax 应 用 ， 关 键 在 于 将 Ajax 功能 看 做 一 般 的 
JavaScript 增 强 功能 ， 在 平稳 退化 的 基础 上 求 得 渐进 增强 。 


7.4.2 ”渐进 增强 与 Ajax 


由 于 Ajax 应 用 能 够 让 用 户 感觉 到 响应 迅速 而 透明 ， 很 多 人 都 认为 它 更 
像 传 统 的 桌面 应 用 ， 而 不 是 网 站 。 虽 然 这 种 说 法 在 某 种 意义 上 是 正确 
的 ， 但 却 很 容易 误导 人 ， 很 容易 让 人 觉得 可 以 萤 无 顾忌 地 使 用 Ajax， 
而 不 必 像 在 创建 网 站 那样 考虑 可 用 性 和 可 访问 性 。 


很 多 站 点 使 用 了 Ajax 技术 并 明确 要 求 必 须 司 用 JavaScript 才 能 正常 访问 
网 站 的 内 容 。 有 一 种 观点 为 此 溺 护 ， 今 天 站 点 提供 的 功能 是 如 此 丰 
是， 根本 不 可 能 做 到 平稳 退化 。 


我 不 狗 同 这 种 观点 。 实 际 上 ， 我 认为 能 够 通过 Ajax 实现 的 应 用 一 定 也 
可 以 通过 其 他 非 Ajax 技术 来 实现 。 归根结底 ， 要 看 你 怎么 用 Ajax 。 


如 果 你 从 一 开始 设计 就 以 Ajax 为 起 点 ， 那 么 以 后 确实 很 难 把 它 从 成 品 
站 点 中 剥离 出 来 ， 再 额外 提供 一 个 不 使 用 Ajax 的 版 本 。 但 是 ， 如 果 一 
开始 你 的 应 用 就 是 基于 老式 的 页 面 刷新 机 制 构建 的 ， 那 么 就 可 以 在 既 
有 框架 基础 上 ， 用 Ajax 拦住 发 送 到 服务 器 的 请 求 ， 并 将 请 求 转交 给 

XMLHttpRequest 对 象 处 理 。 这 种 情况 下 ，Ajax 功 能 就 扮演 了 一 个 位 
于 常规 站 点 之 上 的 层 。 


这 种 说 法 听 起 来 有 点 耳 熟 ， 是 吗 ? 这 跟 我 们 第 5 章 讨论 的 源 进 增强 理念 
没有 什么 区 别 。 从 一 开始 就 依赖 Ajax 构建 核心 应 用 ， 无 异 于 从 一 开始 
就 使 用 javascript: 伪 协议 去 处 理 点 击 链接 的 操作 《同样 也 在 第 5 章 讨论 
过 ) 。 对 于 后 者 ， 更 好 的 方式 当然 是 只 使 用 常规 的 链接 ， 然 后 通过 
JavaScript 去 拦截 默认 动作 。 同 样 的 道理 ， 构 建 Ajax 网 站 的 最 好 方法 ， 
也 是 先 构 建 一 个 常规 的 网 站 ， 然 后 Hijax 它 。 


7.4.3 Hijax 


如 果 说 Ajax 的 成 功 要 归功 于 它 的 这 个 简短 好 记 的 名 字 ， 让 人 提 到 它 的 
时 候 不 用 再 说 “XMLHttpRequest 和 DOM 脚 本 编程 、CSS， 以 及 
(X)HTML”， 而 只 要 说 “Ajax” 就 可 以 了 。 那 么 ， 你 只 要 说 “Hijax””， 别 
人 也 就 明白 它 指 的 是 “渐进 增强 地 使 用 Ajax”。 


1 Jeremy Keith 借 用 了 hijack (劫持 ) 一 词 的 发 音 和 含义 ， 意 思 就 是 拦截 用 户 操作 触发 的 请 求 。 
_ 译 者 注 


Ajax 应 用 主要 依赖 后 台 服 务 器 ， 实 际 上 是 服务 器 端的 脚本 语言 完成 了 
绝 大 部 分 工作 。XMLHttpRequest 对 象 作为 浏览 器 与 服务 器 之 间 
的 “中 间 人 ”， 它 只 是 负责 传递 请 求 和 响应 。 如 果 把 这 个 中 间 人 请 开 ， 
浏 蜗 器 与 服务 器 之 间 的 请 求 和 响应 应 该 继续 完成 (而 不 是 中 断 ); ， 只 
不 过 花 的 时 间 可 能 会 长 一 点 点 。 


想 一 想 登 录 表单 ， 构 建 它 最 简单 的 办 法 束 是 按照 老 传统 ， 让 表单 把 整 
个 页 面 痢 提交 到 服务 器 ， 然 后 服务 句 再 发 回来 一 个 包含 反馈 的 新 页 
面 。 所 有 处 理 操 作 都 在 服务 右上 完成 ， 而 用 户 在 表单 中 输入 的 数据 则 
由 服务 右 人 负责 取 得 并 与 保存 在 数据 库 里 的 数据 进行 比较 ， 看 十 不 足 真 
的 存在 这 么 个 用 户 。 


然后 ， 为 了 给 这 个 登录 表单 添加 Ajax 功能 ， 就 需要 拦截 提交 表单 的 请 
求 〈Hijax 嘛 ) ， 让 XMLHttpRequest 请 求 来 代为 发 送 。 提 交 表 单 触发 
的 是 submit 事件 ， 因 此 只 要 通过 onsubmit 事件 处 理 函 数 捕获 该 事 
件 ， 就 可 以 取消 它 的 默认 操作 (提交 整个 页 面 ) ， 然 后 代 之 以 一 个 新 
的 操作 : 通过 XMLHttpRequest 对 象 向 服务 器 发 送 数据 。 


拦截 了 登录 表单 的 提交 请 求 之 后 ， 登 录 过 程 就 可 以 让 用 户 感觉 更 方 
便 。 啊 应 时 间 加 快 了 ， 不 必 刷 痢 整 个 页 面 了 。 可 是 ， 万 一 用 户 的 浏览 
绥 没 有 局 动 JavaScript 呢 ? 没关系 ， 登 永 表单 照样 能 让 用 户 正 党 登录 。 


只 不 过 所 花 时 间 要 长 一 点 ， 用 户 体验 没有 那么 流畅 罢了 。 上 毕竟， 处 理 
登录 验证 的 探 作 都 在 服务 器 上 啊 ， 有 什么 理由 让 没有 JavaScript 的 用 户 
不 能 登录 呢 ! 

请 大 家 记 住 这 个 事实 ，Ajax 应 用 主要 依赖 于 服务 强 端 处 理 ， 而 非 客户 
端 处 理 。 上 既然 如 此 ， 它 就 没有 理由 不 能 做 到 平稳 退化 。 不 可 否认 ， 有 
些 应 用 如 果 没 有 了 Ajax 而 只 依靠 页 面 刷 新 ， 用 户 的 每 一 次 操作 可 能 都 
。 但 慢 一 点 的 退化 的 体验 ， 是 不 是 仍然 要 比 完全 没有 体 
难 呢 ? 


12 章 在 构建 一 个 完整 的 网 站 示例 时 ， 将 详细 介绍 如 何 利 用 Hijax 技 


7.5 “小 结 


在 本 草 里 ， 我 们 介绍 了 儿 种 不 同 的 向 浏览 器 里 的 文档 动态 添加 标记 的 
办 法 。 我 们 还 位 要 地 回顾 了 两 种 “传统 的 ”技术 : 


。document .write 方法 
。 jinnerHTML 属性 


了 一 些 有 一 定 深度 的 利用 DOM 方 法 来 动态 创建 标记 的 例 


createElement 方法 
createTextNode 方法 
appendCchild 方法 
insertBefore 方法 


使 用 这 些 方法 的 关键 是 将 Web 文 档 视 为 节点 树 。 请 记 住 ， 你 用 
createElement 或 createTextNode 方法 刚刚 创建 出 来 的 节点 只 是 
JavaScript 世 界 里 的 孤儿 。 利 用 appendCchild 或 insertBefore 方 
法 ， 可 以 把 这 些 DocumentFragment 对 象 插入 某 个 文档 的 节点 树 ， 让 
它们 呈现 在 浏览 器 窗口 里 。 


在 这 一 章 里 ， 你 还 看 到 了 如 何 对 图 片 库 做 进一步 改进 。 你 还 看 到 了 一 
个 非常 实用 的 insertAfter 函数 的 构建 过 程 。 在 需要 把 一 些 标记 添加 


到 文档 时 ， 这 个 函数 往往 能 帮 上 大 忙 。 
本 章 还 简要 讨论 了 Ajax 和 异步 请 求 ， 这 些 内 容 将 在 第 12 章 更 详细 地 介 
绍 。 


在 下 一 章 里 ， 你 将 会 看 到 更 多 向 文档 添加 标记 的 例子 ， 学 会 动态 创建 
一 些 很 有 用 的 信息 块 来 增强 你 的 文档 。 


第 8 章 充实 文档 的 内 容 


本 章 内 容 


。 一 个 为 文档 创建 “ 缩 略 语 列 表 ” 的 函数 
。 一 个 为 文档 创建 “文献 来 源 链接 ”的 函数 
。 一 个 为 文档 创建 < 快捷 键 清单 ”的 函数 


上 一 章 你 已 经 学 会 利用 DOM 方 法 和 属性 来 动态 创建 标记 。 在 这 一 章 里 
你 将 继续 在 实践 中 应 用 这 些 技术 。 你 会 通过 DOM 创 建 一 些 标记 片段 并 
随后 把 它们 添加 到 网 页 。 从 friends of ED 网 站 (http://friendsofed.com/ 
) 本 书 的 下 载 页 面 你 可 以 找到 这 些 函 数 的 完整 版 本 。 


8.1 不 应 该 做 什么 


理论 上 ， 你 可 以 用 JavaScript 把 一 些 重要 的 内 容 添 加 到 网 页 上 。 事 实 上 
这 是 一 个 坏 主意 ， 因 为 这 样 一 来 JavaScript 就 没有 任何 空间 去 平稳 退 
化 。 那 些 缺乏 必要 的 JavaScript 文 持 的 访问 者 台 会 永远 也 看 不 到 你 的 重 
要 内 容 。 至 少 到 现在 为 止 ， 各 大 搜索 引擎 网 站 的 搜索 机 器 人 
(searchbot) 还 几乎 不 文 持 JavaScript。 
如 果 你 觉察 到 目 己 正在 使 用 DOM 技 术 把 一 些 重 要 的 内 容 添 加 a 到 网 页 
上 ， 则 应 该 立刻 停 下 来 去 检讨 你 的 计划 和 思路 。 你 很 可 能 会 发 现 自己 
正在 滥用 DOM 1 


第 5 章 我 们 讨论 过 ， 下 面 这 两 项 原则 要 牢记 在 心 。 


。 渐进 增强 (progressive enhancement) 。 渐 进 增强 原则 基于 这 样 一 
种 思想 : 你 应 该 总 是 从 最 核心 的 部 分 ， 也 就 是 从 内 容 开 始 。 应 该 
根据 内 容 使 用 标记 实现 良好 的 结构 ; 然后 再 逐步 加 强 这 些 内 容 。 
这 些 增强 工作 既 可 以 是 通过 CSS 改 进 呈现 效果 ， 也 可 以 是 通过 
DOM 添 加 各 种 行为 。 如 果 你 正在 使 用 DOM 添 加 核心 内 容 ， 那 么 你 
添加 的 时 机 未 免 太 迟 了 ， 内 容 应 该 在 刚 开始 编写 文档 时 就 成 为 文 
档 的 组 成 部 分 。 
平稳 退化 。 渐 进 增强 的 实现 必然 支持 平稳 退化 。 如 果 你 按照 渐进 
增强 的 原则 去 充实 内 容 ， 你 为 内 容 添加 的 样式 和 行为 就 自然 支持 
平稳 退化 ， 那 些 缺乏 必要 的 CSS 和 DOM 支 持 的 访问 者 仍 可 以 访问 
到 你 的 核心 内 容 。 如 果 你 用 JavaScript 去 添加 这 些 重要 内 容 ， 它 就 
没 法 支持 平稳 退化 ， 不 支持 JavaScript， 就 看 不 到 内 容 。 这 好 像 是 
种 限制 ， 其 实 不 是 ， 利 用 DOM 去 生成 内 容 有 着 广泛 的 用 途 。 


8.2 把 “不 可 见 ” 变 成 “可 见 ” 


现 如 今 的 Web 设计 人 员 能 够 从 许多 方面 对 网 页 的 显示 效 末 加 以 控制 。 在 
对 包含 在 HTML 标 记 内 的 内 容 设 置 样式 时 ，CSsS 提 供 了 非常 强大 的 功 
能 。 这 种 技术 早已 超越 了 对 网 页 内 容 的 字体 和 颜色 进行 商 单 调整 的 初 
级 阶段 。 利 用 CSS， 我 们 可 以 把 原本 纵向 排列 的 元 素 显 示 成 一 行 。 第 6 
章 JavaScript 图 片 库 页面 上 由 缩 略 图 构成 的 图 片 清 单 束 是 一 个 很 好 的 例 
子 。 包 含 在 <1i> 标 等 里 的 列表 项 在 通常 情况 下 各 占 一 行 ， 但 在 我 把 每 
个 列表 项 的 display 属性 设置 为 nline 之 后 ， 那 些 列表 项 在 浏览 器 
窗口 里 从 纵 疝 排列 变 成 了 横向 排列 。 


反 过 来 也 是 可 以 的 。 对 于 通常 是 横向 排列 的 元 素 ， 只 需 把 它 的 
display 属性 设置 为 block ， 融 可 以 让 这 个 元 系 独 占 一 行 。 如 宁 把 某 
个 元 素 的 display 属性 设置 为 none ， 甚 至 可 以 让 它 根本 不 出 现在 浏 
唤 絮 窗口 里 ， 这 个 元 素 仍 是 DOM 广 点 树 的 组 成 部 分 ， 只 是 浏览 器 不 显 
示 它 们 而 已 。 

除了 标签 之 间 的 内 容 以 外 ， 标 签 内 的 属性 中 也 包含 语义 信息 。 在 对 内 
容 进行 标记 时 ， 正 确 地 设置 标记 属性 也 是 工作 的 重要 组 成 部 分 。 


绝 大 多 数 属性 的 内 容 ( 即 属性 值 ) 在 Web 浏 览 器 里 都 是 不 显示 的 ， 只 有 
极 少数 属性 例外 ， 但 不 同 的 浏览 万 在 至 现 这 些 例外 的 属性 时 却 币 利生 
姿 百 态 。 比 如 说 ， 有 些 浏览 器 会 把 tit1le 属性 的 内 容 显示 为 弹出 式 的 


提示 框 ， 为 一 些 浏 览 妖 则 会 把 它们 显示 在 状态 柱 里 。 有 些 浏 览 右 会 把 
alt 属性 的 内 容 显 示 为 弹出 式 的 提示 框 ， 这 导致 了 对 alt 属性 的 广泛 
滥用 。 这 个 属性 原本 的 用 途 是 ， 在 图 片 不 可 用 (无 法 显示 ) 时 用 一 段 
摘 述 文字 来 解释 这 个 位 置 的 图 斤 。 


在 显示 属性 这 个 问题 上 ， 你 只 能 听任 浏览 器 摆布 。 其 实 只 需要 一 点 点 
DOM 编 程 ， 我 们 整 能 够 把 这 种 控制 权重 新 掌握 在 目 己 的 手 里 。 
本 章 我 们 着 上 腿 于 使 用 DOM 技 术 为 网 页 添加 一 些 实用 的 小 部 件 。 


。 得 到 隐藏 在 属性 里 的 信息 。 
。 创 建 标 记 封 装 这 些 信息 。 
。 把 这 些 标记 插入 到 文档 。 


这 与 简单 地 利用 DOM 去 新建 一 些 内 容 有 所 区 别 。 在 本 草 的 例子 里 ， 这 
些 内 容 已 经 存在 于 标记 之 中 ， 你 要 利用 JavaScript 和 DOM 复 制 这 些 内 容 
并 以 另外 一 种 结构 呈现 它们 。 


8.3 内容 


和 往 稼 一样， 任何 网 页 都 以 内 容 为 出 发 点 。 现 在 全 下 面 这 段 文字 作为 
你 的 出 发 点 : 


What is the Document Object Mode1? 
The W3C defines the DOM as: 
A platform- and language-neutral interface that will allow programs 


and scripts to dynamically access and update the 
content, structure and style of documents. 
It is an API that can be used to navigate HTML and XML documents. 


给 这 段 文字 加 上 适当 的 标记 : 


<hi>what is the Document Object Model?</h1> 

<p> 

The <abbr title="World Wide Web Consortium">w3C</abbr> defines 
-the <abbr title="Document Object Model">DOM</abbr> as: 

</p> 

<blockquote cite="http://www.w3.org/DOM/"> 


<p> 
A 这 全 and language-neutral interface that will allow programs 
=and scripts to dynamically access and update the 
“content, structure and style of documents. 

</p> 
</blockquote> 
<p> 
It is an <abbr title="Application Programming Interface">API</abbr> 
=“that can be used to navigate <abbr title="HyperText Markup 
Language"> 
=wHTML</abbr> and <abbr title="eXtensible Markup Language">XML 
=</abbr> documents. 
</p> 


这 上段 文本 包含 大 量 的 缩 上 略语 ， 上 面 已 经 都 用 <abbr> 标签 把 它们 都 标识 
出 来 了 3 


注意 ”<abbr> 标签 与 <acronym> 这 两 个 标签 之 间 的 区 别 一 直 纠 
缠 不 清 。<abbr> 标签 的 含义 是 “ 缩 上 略语 ”( 源 自 瑞 文 单词 
abbreviation) ， 它 是 对 单词 或 短语 的 简写 形式 的 统称 。 
<acronym> 标签 的 含义 是 被 当成 一 个 单词 来 读 的 “ 首 字 母 缩 写 
词 ”( 源 自 英 文 单词 acronym) 。 如 果 你 把 DOM 念 成 一 个 单词 
dom， 它 就 是 一 个 站 字母 缩写 词 ， 如 果 你 把 它 念 成 三 个 字母 D-O- 
M， 它 束 是 一 个 缩 上 略语 。 所 有 的 下 字母 缩 略 词 都 是 缩 略 语 ， 但 不 
是 所 有 的 缩 略 语 都 是 首 字 母 缩 略 词 。 为 避免 混乱 持续 下 去 ， 在 
HTML5 中 <acronym> 标签 已 被 <abbr> 标签 代替 。 


现在 己 经 把 那 自 文本 改 写成 一 个 标记 片段 ， 你 需要 把 它 扩 ws 
整 的 网 页 。 具 体 地 说 ， 要 先 把 这 段 内 容 放 入 <body> 标签 ， 再 把 这 
body 元 素 以 及 相应 的 head 元 素 放 入 <html> 标签 。 


8.3.1 选用 HTMIL、XHTML 还 是 HTML5 


对 于 标记 而 言 ， 选 用 HTML 还 是 XHTML 是 你 的 自由 。 重 要 的 是 不 管 选 
用 的 哪 种 文档 类 型 ， 你 使 用 的 标记 必须 与 你 选用 的 DOCTYPE 声明 保持 
一 致 o 


就 个 人 而 言 ， 我 更 喜欢 使 用 XHTML 规则 ， 使 用 一 个 DOCTYPE 让 浏览 
右 采 用 更 严格 的 呈现 方案 。 它 对 允许 使 用 的 标记 有 着 更 严格 的 要 求 ， 
市 这 文 可 以 督促 我 写 出 更 严 刘 清 晰 的 文档 。 比 如 说 ， 在 写 标 签 和 属性 


时 ，HTML 既 允许 使 用 大 写字 母 (比如 <P> ) ， 也 允许 使 用 小 写字 母 
(比如 <p> ) ，XHTML 却 要 求 所 有 的 标签 名 和 属性 名 都 必须 使 用 小 写 
字母 。 


HTML 在 某 些 情况 下 会 允许 省 略 结束 标签 ， 比 如 说 ， 你 可 以 省 略 </p> 
和 </1i> 标签 。 表 面 上 看 它 提供 了 一 种 弹性 ， 但 事实 上 一 旦 文档 在 浏 
哆 絮 里 的 呈现 效果 与 你 的 预期 不 符 ， 追 查 问 题 的 根源 将 变 得 十 分 困 

难 。 在 XHTML 的 世界 里 ， 所 有 的 标签 都 必须 闭合 一 一 对 诸如 <img> 和 
<br> 之 类 的 孤立 元 素 也 不 例外 ， 在 书写 时 它们 必须 有 一 个 反 斜 线 字符 
表示 标签 结束 : 即 <img/> 和 <br/> 这 样 。 注 意 ， 为 了 与 早期 的 浏览 
器 保持 兼容 ， 应 该 在 反 斜 杠 字 符 的 前 面 保留 一 个 空格 。 使 用 严格 的 
DOCTYPE 对 验证 工具 跟 踩 错误 会 有 很 大 的 帮助 。 


若 要 使 用 XHTML DOCTYPE ， 应 将 下 列 内 容 写 在 文档 开头 : 


<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 


"http://www.w3.org/TR/xhtml1/DTD/xhtml1i-strict.dtd"> 


2 那 就 是 使 用 HTML5 的 文档 类 型 声明 ， 它 


<!DOCTYPE html> 


总 共 才 15 个 字符 。 简 短 好 记 ， 并 且 容易 输入 。 而 且 这 个 文档 声明 同样 
也 文 持 HTML 和 XHTML 标记 。 要 详细 了 解 HTML5， 请 看 第 11 章 。 


注意 ” 某 些 浏览 器 要 根据 DOCTYPE 来 决定 使 用 标准 模式 ， 还 是 使 
用 兼容 模式 来 呈现 页 面 。 兼 容 模 式 意味 着 浏览 器 要 模仿 某 些 早期 
浏览 器 的 “怪异 行为 ”并 容许 那些 不 规范 的 页 面 在 新 浏览 器 也 能 
正常 工作 。 一 般 来 说 ， 我 们 都 应 该 坚持 使 用 标准 模式 ， 避 免 触 发 
兼容 模式 。 谢 天 谢 地 ，HTML5 DOCTYPE 默认 对 应 的 就 是 标准 模 
式 o 


XHIMLS5 


假如 真 想 较真 ， 可 以 走 XHTML5 的 路 线 ， 让 Web 服 务 器 以 
application/xhtml+xml 的 MIME 类 型 来 响应 页 面 ， 但 必须 预 


先 警告 。 


XHTML5 本 质 上 是 使 用 严格 的 XML 规则 编写 的 HTIML5。 从 技术 角 
度 说 ，Web 浏 览 器 应 该 将 任何 XHTML5 文 档 都 视 为 XML 文档 ， 而 
不 是 HTML 文 档 。 而 在 现实 中 ， 你 还 得 在 文档 的 头 部 发 送 正 确 的 
MIME 类 型 ， 即 application/xhtml+xml 。 有 些 浏览 器 不 认识 
这 个 MIME 类 型 ， 因 而 一 般 要 在 服务 器 端 对 浏览 器 进行 探查 后 再 发 
送 。 否 则 最 坏 的 情况 ， 页 面 很 可 能 根本 不 会 在 浏览 器 中 呈现 。 
此 ， 绝 大 多 数 XHTML 页 面 仍然 是 以 HTML 类 型 发 送 的 。 


如 果 使 用 了 XHTML5， 而 且 MIME 类 型 也 正确 ， 那 么 你 的 页 面 除 了 
在 某 些 浏览 器 中 可 能 无 法 呈现 之 外 ， 有 些 HTML DOM 属 性 ， 如 
document ,write 也 将 无 法 使 用 。 当 然 ， 核 心 DOM 方 法 总 是 能 
正常 使 用 的 。 不 仅 在 XHTML5 中 ， 在 任何 有 效 的 XML 文档 中 ， 核 
心 DOM 方 法 都 畅行 无 阻 。 


下 面 是 按照 HTML5 规范 完成 的 最 终 标记 文件 explLlanation.html : 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Explaining the Document Object Model</title> 
</head> 
<body> 
<hi>what is the Document Object Model?</hi1> 
<p> 
The <abbr title="World Wide Web Consortium">w3C</abbr> defines the 
<abbr title="Document 
Object Model">DOM</abbr> as: 
</p> 
<blockquote cite="http://www.w3.org/DOM/"> 
<p> 
A platform- and language-neutral interface that will allow programs 
=and scripts to dynamically access and update the 
“content, structure and style of documents. 
</p> 
</blockquote> 


<p> 
It 人 <abbr title="Application Programming Interface">API</abbr> 
=“that can be used to navigate <abbr title="HyperText Markup 
Language"> 
wHTML</abbr> and <abbr title="eXtensible Markup Language">XML 
学 </abbr> documents. 
</p> 
</body> 
</html> 


如 琳 你 在 Web 浏 吕 右 里 加 载 这 个 页 面 ， 束 可 以 看 到 浏览 右 古 如 何 显 示 那 
些 标记 内 容 的 ， 如 图 8-1 所 示 。 有 些 浏览 亏 会 把 文档 中 的 缩 略 语 

(<abbr> 标签 ) 显示 为 带 有 下 划 线 或 下 划 点 的 文本 ， 另 一 些 浏览 器 则 
会 把 缩 略 语 显示 为 斜体 字 。 


Explaining the Document Object Model 


仿 @@ 省 


What is the Document Object Model? 


The W3C defines the DOM as: 


A platform- and language-neutral interface that will allow programs and Scripts to 
dynamically access and update the content, Structure and Style of documents. 


图 8-1 
8.3.2 CSS 


虽然 我 还 未 给 explanation .html 文档 配 上 任何 样式 表 ， 但 样式 显然 
已 经 在 起 作用 了 。 这 是 因为 每 种 浏览 器 都 有 一 些 自己 的 默认 样式 。 


目 己 的 样式 表 来 取代 浏览 絮 的 默认 样式 。 请 看 下 面 这 个 例 


body { 
font-family: "Helvetica","Arial",sans-serif; 
font-size: 10pt; 


} 
abbr { 


text-decoration: none; 
border: 0; 
font-style: normal; 


把 这 个 样式 表 保 存 为 typography .css 文件， 并 将 其 放 到 子 目录 
styles 里 去 。 


在 explanation.html 文档 的 <head> 部 分 增加 一 条 语句 : 


<link rel="stylesheet" media="screen" href="styles/typography.css" 


/> 


现在 你 把 explanation .html 文档 加 载 到 一 个 web 浏 览 右 里 ， 可 以 看 
到 一 些 有 差别。 这 份 文 档 的 字体 变 了 ， 其 中 的 缩 略 语 已 看 不 出 有 特别 之 
处 ， 如 图 8-2 所 示 。 


Explaining the Document Object Model 
Om 
What is the Document Object Model? 
The W3C defines the DOM as: 


A platform- and language-neutral interface that will allow programe and scripts to dynamically 
access and update the content, structure and style of docum 


lt is an API that can be used to navigate HTML and XML documents. 


图 8-2 
8.3.3 JavaScript 


缩 略语 (<abbr> 标签 ) 的 title 属性 在 浏览 器 里 是 隐藏 的 。 有 些 浏 
览 吉 会 在 你 把 鼠标 指针 车 停 在 缩 略 语 上 时 ， 将 它 的 tit1le 属性 显示 为 
一 个 弹出 式 的 提示 消 轧 。 怠 像 浏 览 郁 所 使 用 的 黑 认 样式 一 样 ， 浏 贤 凑 
对 缩 上 略语 的 默认 呈现 行为 也 是 各 有 各 的 做 法 。 


就 像 我 们 可 以 用 自己 的 CSS 样 式 表 去 取代 浏览 器 所 使 用 的 默认 样式 屠 
样 ， 你 也 可 以 用 DOM 去 改变 浏览 器 的 默认 行为 。 

8.4 “显示 “ 缩 略 语 列表 ” 

要 能 把 这 些 <abbr> 标签 中 的 tit le 属性 集中 起 来 显示 在 一 个 页 面 该 


多 好 ! 用 一 个 定义 列表 元 素来 显示 这 些 <abbr> 标签 包含 的 文本 和 
title 属性 最 合适 不 过 了 “。 下 面 是 我 希望 得 到 的 定义 列表 : 


<dl> 


<dt>w3C</dt> 

<dd>world Wide Web Consortium</dd> 

<dt>DOM</dt> 

<dd>Document Object Model</dd> 

<dt>API</dt> 

<dd>Application Programming Interface</dd> 

<dt>HTML</dt> 

<dd>HyperText Markup Language</dd> 

<dt>XML</dt> 

<dd>eXtensible Markup Language</dd> 
</d]> 


你 可 以 使 用 DOM 来 创建 这 个 定义 列表 ， 有 具体 步骤 如 下 。 
(1) 遍历 这 份 文 档 中 的 所 有 abbr 元 素 。 

(2) 保存 每 个 abbr 元 素 的 title 属性 。 

(3) 保存 每 个 abbr 元 素 包含 的 文本 。 

(4) 创建 一 个 “定义 列表 ”元 素 ( 即 d1 元 素 ) 


(5) 遍历 刚才 保存 的 title 属性 和 abbr 元 素 的 文本 。 

(6) 创建 一 个 “定义 标题 "元素 ( 即 dt 元 素 ) 

(7) 把 abbr 元 素 的 文本 插入 到 这 个 dt 元 素 。 

(8) 创建 一 个 “定义 描述 元素 ( 即 dd 元 素 ) 

(9) 把 title 属性 插入 到 这 个 dd 元 素 。 

(10) 把 dt 元 素 追 加 到 第 4 步 创建 的 dl 元 素 上 。 

(11) 把 dd 元 素 追 加 到 第 4 步 创建 的 d1 元 素 上 。 

(12) 把 dl 元 素 追 加 到 explanation.html 文档 的 body 元 素 上 。 
我 们 编写 一 个 函数 来 做 上 面 这 些 事 。 


8.4.1 编写 dijsplayAbbreviations 本 数 


我 们 把 这 个 函数 命名 为 displayAbbreviations()。 创 建 一 个 名 为 
displayAbbreviations .js 的 文件 并 将 其 存放 到 子 目录 scripts 。 


第 一 步 是 定义 这 个 函数 。 因 为 它 不 需要 任何 参数 ， 所 以 函数 名 后 面 的 
圆 括号 将 是 衬 的 : 


function displayAbbreviations() { 


开始 遍历 这 份 文档 里 的 所 有 abbr 元 素 之 前 ， 我 们 必须 先 把 它们 找 出 
来 。 这 可 以 用 getElementsByTagName 方法 轻松 完成 : 只 需 把 abbr 
作为 参数 传递 给 这 个 方法 ， 它 就 会 返回 一 个 包含 这 个 文档 里 的 所 有 
abbr 元 素 的 节点 集合 。 (前 面 提 到 过 ， 节 点 集合 就 是 一 个 由 市 点 构成 
的 数组 ) 。 我 把 这 个 数组 保存 到 变量 abbreviations 里 : 


var abbreviations = document.getElementsByTagName("abbr"); 


现在 ， 我 们 可 以 开始 遍历 abbreviations 数组 了 ， 但 在 遍历 之 前 先 
进行 一 些 测 试 。 我 们 知道 在 这 份 文 档 里 有 一 些 缩 略 语 ， 但 并 非 所 有 的 
文档 都 这 样 。 如 果 想 让 这 个 函数 还 能 适用 于 其 他 文档 ， 就 应 该 先 去 检 
查 一 下 当前 文档 是 不 是 包含 有 缩 略 语 ， 再 决定 要 不 要 走 下 一 步 。 


查询 一 下 abbreviations 数组 的 length 属性 ， 我 们 就 能 知道 这 个 
文档 里 有 多 少 个 缩 略语 。 如 果 abbreviations .length 小 于 1， 就 说 
明 这 个 文档 里 没有 缩 略 语 。 如 果真 是 这 样 ， 这 个 函数 就 应 该 立刻 停止 
执行 并 返回 一 个 布尔 值 false : 


if (abbreviations.length < 1) return false; 


如 琳 文 档 里 没有 abbr 元 素 ， 这 个 范 数 将 束 此 结束 。 


下 一 步 是 获取 并 保存 每 个 abbr 元 素 提供 的 信息 。 我 们 需要 得 到 每 个 
<abbr> 标签 包含 的 文本 及 其 title 属性 的 值 。 当 你 需要 把 像 这 样 的 
人 数组 是 理想 的 存储 媒介 。 定 义 一 个 名 为 defs 
的 源 数 组 : 


var defs = new Array() 


现在 开始 遍历 abbreviations 数组 : 


for (var i=0; i<abbreviations.length; I++) { 


为 了 得 到 当前 缩 略 语 的 解释 文字 ， 用 getAttribute( ) 方法 得 到 
title 属性 的 值 ， 并 把 值 保 存 到 变量 definition 里 : 


var definition = abbreviations[i].getAttribute("title"); 


要 得 到 <abbr> 标签 包含 的 缩 略 语文 本 需要 nodeValue 属性 。 实 际 上 
是 需要 拿 到 abbr 元 素 里 的 文本 方 点 的 值 。 在 explanation.html 文 
档 中 的 每 个 abbr 元 素 里 ， 文 本 节点 都 是 这 个 元 素 内 部 的 第 一 个 (也 是 
仅 有 的 一 个 ) 节点 。 换 句 话 说 ， 这 个 文本 节点 是 abbr 元 素 节 点 的 第 一 
个 子 节 点 : 


abbreviations[i].firstChild 


下 面 这 条 语句 得 到 这 个 文本 市 点 的 nodeValue 属性 并 把 它 赋 值 给 变量 
key: 


var key = abbreviations[i].lastchild.nodeValue; 


现在 有 两 个 变量 了 : definition 和 key。 这 两 个 变量 的 值 就 是 我 想 
保存 到 defs 数组 里 的 内 容 。 我 们 通过 把 其 中 之 一 用 作 数 组 元 素 的 下 标 
( 键 ) ， 另 一 个 用 作 数 组 元 素 的 值 的 方式 来 同时 保存 这 两 个 值 : 


defs[key] = definition; 


defs 数组 中 的 第 一 个 元 素 的 下 标 是 W3C ， 值 是 wor1d Wide Web 
Consortium; defs 数组 中 的 第 二 个 元 素 的 下 标 是 DOM ， 值 是 
Document Object Model ， 依 次 类 推 。 


下 面 是 这 个 for 循环 的 完整 代码 : 


for (var i=0; i<abbreviations.length; I++) { 
var definition = abbreviations[i].getAttribute("title"); 
var key = abbreviations[i].1lastchild.nodeValue; 


defs[key] = definition; 


为 提高 这 个 循环 的 可 读 性 ， 建 议 你 把 abbreviations[i] 的 值 一 一 你 
在 本 次 循环 里 正在 被 遍历 的 那个 abbreviations 数组 元 素 一 一 赋 给 
一 个 名 为 current_abbr 的 变量 : 


for (var i=0; i<abbreviations.length; I++) { 
var current_abbr = abbreviations[i]; 
var definition = current_abbr.getAttribute("title"); 


var key = current_abbr.lastchild.nodevalue 
defs[key] = definition; 


如 果 你 觉得 current_abbr 变量 可 以 帮助 你 更 好 地 理解 这 段 代 码 ， 那 
2 。 额外 增加 一 条 这 样 的 语句 只 是 一 个 非常 小 的 开 


从 理论 上 讲 ， 你 完全 可 以 把 整个 循环 体 写成 一 条 语句 ， 但 那 会 让 代码 
非常 难以 阅读 : 


for (var i=0; i<abbreviations.length; I++) { 
defs[abbreviations[i].lastchild.nodeValue] = 


abbreviations[i].getAttribute("title"); 
} 


在 编写 JavaScript 代 码 时 ， 许 多 操作 都 有 多 种 实现 办 法 。 束 拿 上 面 这 个 
for 循环 来 说 ， 你 已 经 看 到 了 三 种 不 同 的 写法 。 选 出 一 种 最 适合 你 的 
写法 用 在 你 的 脚本 里 。 如 果 在 编写 某 些 代码 时 你 束 沉 得 它们 不 容易 理 
解 ， 等 日 后 再 去 阅读 它们 的 时 候 束 会 更 加 困难 。 


现在 ， 我 已 经 把 那些 缩 略 语 及 其 解释 保存 到 了 defs 数组 里 。 接 下 来 我 
们 要 创建 标记 以 便 把 这 些 内 容 显 示 在 页 面 上 。 


8.4.2 ”创建 标记 


定义 列表 是 表现 缩 略 语 及 其 解释 的 理想 结构 。 定 义 列表 (<dl> ) 由 一 
系列 “定义 标题 ”(<dt> ) 和 相应 的 “定义 描述 ”(<dd> ) 构成 : 


<dl> 
<dt>Title 1</dt> 
<dd>Description 1</dd> 


<dt>Title 2</dt> 
<dd>Description 2</dd> 
</d]> 


用 createElement 方法 创建 这 个 定义 列表 ， 并 把 这 个 新 创建 的 元 素 
赋值 给 变量 dlist B 


var dlist = document.createElement("d1"); 


由 上 面 这 条 语句 创建 出 来 的 d1 元 素 只 是 JavaScript 世 界 里 的 一 个 孤儿 。 
稍 后 我 们 将 通过 它 的 引用 ， 也 就 是 dlist 变量 ， 把 它 添加 到 
explanation.html 文档 中 。 


现在 需要 再 编写 一 个 循环 ， 对 刚刚 创建 的 defs 数组 进行 这 历 。 这 次 我 
们 还 是 使 用 for 循环 ， 不 过 这 次 与 前 面 编写 的 那个 for 循环 有 点 儿 不 
一 样 。 你 可 以 利用 一 个 for/in 循环 把 某 个 数组 的 下 标 〈 键 ) 临时 赋值 


for (variable in array) 


在 进入 第 一 次 循环 时 ， 变 量 variable 将 被 赋值 为 数组 array 的 第 一 
个 元 素 的 下 标 值 ; 在 进入 第 二 次 循环 时 ， 变 量 variable 将 被 赋值 为 
数组 array 的 第 二 个 元 素 的 下 标 值 ; 依次 类 推 ， 直 到 过 历 完 数组 
array 里 的 所 有 元 素 为 止 。 这 就 是 我 们 再 历 关 联 数组 defs 的 方式 : 


for (key in defs) { 


上 面 这 行 代码 的 含义 是 “对 于 defs 关联 数组 里 的 每 个 键 ， 把 它 的 值 赋 

给 变量 Key ”。 在 接 下 来 的 循环 体 部 分 ， 变 量 key 可 以 像 其 他 变量 那样 
使 用 。 有 具体 到 这 个 例子 ， 因 为 变量 key 的 值 是 当前 正在 处 理 的 数组 元 

素 的 键 ， 所 以 可 以 利用 它 得 到 相应 的 数组 元 聂 的 值 : 


var definition = defs[key]; 


在 这 个 for/in 循环 的 第 一 次 循环 里 ， 变 量 key 的 值 是 W3C ， 变 量 
definition 的 值 是 World Wide Web Consortium ; 在 第 二 次 循 
环 里 ， 变 量 key 的 值 是 DOM ， 变 量 definition 的 值 是 Document 
Object Model °。 


每 次 循环 都 需要 创建 一 个 dt 元 素 和 一 个 dd 元 素 。 我 们 还 需要 创建 相 
应 的 文本 市 点 并 把 它们 分 别 添加 到 新 创建 的 dt 和 dd 元 素 。 


先 创 建 dt 元 素 : 


var dtitle = document.createElement("dt"); 


> 二 


代 后 用 变量 key 的 值 去 创建 一 个 文本 节点: 


var dtitle text = document.createTextNode(key); 


我 们 已 经 创建 了 两 个 节点 。 新 创建 的 元 素 节 点 被 赋值 给 变量 dtitle。 
把 新 创建 的 文本 世 点 赋值 给 变量 dtitle_text 。 使 用 
appendchild() 方法 把 dtitle_text 文本 节点 添加 到 dtitle 元 素 
节操 : 


dtitle.appendcChild(dtitle text); 


重复 这 个 过 程 创建 dd 元 素 : 


var ddesc = document.createElement("dd"); 


这 次 用 变量 definition 的 值 创建 一 个 文本 节点 : 


var ddesc_ text = document.createTextNode(definition); 


再 一 次 把 文本 市 护 添 加 到 元 到 广 扩 : 


ddesc.appendChild(ddesc_text); 


现在 ， 我 们 有 了 两 个 元 素 节 点 : dtitle 和 ddesc 。 这 两 个 元 素 节 点 
分 别 包 含 文本 节点 dtitle text 和 ddesc text 。 


在 结束 循环 之 前 ， 接 着 把 新 创建 的 dt 和 dd 元 素 追 加 到 稍 早 创 建 的 d1 
pI 这 个 dl 元素 已 经 锐 赋 给 了 变量 dlist : 


dlist.appendChild(dtitle); 


dlist.appendchild(ddesc); 


下 面 是 这 个 for/in 循环 的 完整 代码 : 


for (key in defs) { 
var definition = defs[key]; 
var dtitle = document.createElement("dt"); 
var dtitle text = document.createTextNode(key); 
dtitle.appendchild(dtitle_ text); 


var ddesc = document.createElement("dd"); 

var ddesc_ text = document.createTextNode(definition); 
ddesc.appendChild(ddesc_ text); 
dlist.appendChild(dtitle); 

dlist.appendChild(ddesc); 


到 了 这 个 阶段 ， 我 们 的 定义 列表 束 完 成 了 。 它 作为 一 个 
DocumentFragment 对 和 象 已 经 存在 于 JavaScript 上 下 文 里 。 接 下 来 的 
工作 是 把 它 插 入 到 文档 中 去 。 

01. 插入 这 个 定义 列表 


与 其 把 这 个 定义 列表 突 天 地 插入 文档 ， 不 如 给 它 加 上 一 个 描述 性 
标题 ， 这 样 应 该 会 有 更 好 的 效果 。 


先 创建 一 个 h2 元 素 市 点 : 


var header = document.createElement("h2"); 


再 创建 一 个 内 容 为 Abbreviations 的 文本 节点 : 


var header_text = document.createTextNode("Abbreviations"); 


然后 把 文本 市 上 添加 a 到 h2 元 素 斑 点 : 


header .appendCchild(header_text ) ; 


对 于 结构 比较 复杂 的 文档 ， 或 许 还 需要 借助 于 特定 的 id 才能 把 新 
创建 的 元 素 揪 入 到 文档 里 的 特定 位 置 。 因 为 
explanations.html 文档 的 结构 并 不 复杂 ， 所 以 只 要 把 新 创建 
的 元 素 追 加 到 body 标签 上 即 可 。 


引用 body 标签 的 具体 做 法 有 两 种 。 第 一 种 是 使 用 DOM Core， 即 
引用 某 给 定 文档 的 第 一 个 〈 也 是 仅 有 的 一 个 ) body 标签 : 


document .getElementsByTagName("body")[09] 


第 二 种 做 法 是 使 用 HTML-DOM， 即 引用 某 给 定 文档 的 body 属 


document .body 


首先 ， 揪 入 “ 缩 略语 表 ” 的 标题 : 


document .body.appendChild(header); 


> 二 


人 后 ， 插 入 “ 纵 略 语 表 ”本 号: 


document .body.appendChild(dlist); 


displayAbbreviations() 函数 终于 全 部 完成 : 


function displayAbbreviations() { 
var abbreviations = document.getElementsByTagName("abbr"); 
If (abbreviations.length < 1) return false,; 


var defs = new Array(); 

for (var i=0; i<abbreviations.length; i++) { 
var current_abbr = abbreviations[i]; 
var definition = current_abbr.getAttribute("title"); 
var key = current_abbr.]lastchild.nodeValue; 
defs[key] = definition; 


var dlist = document.createElement("d1"); 

for (key in defs) { 
var definition = defs[key]; 
var dtitle = document.createElement("dt"); 
var dtitle text = document ,createTextNode(key ) ， 
dtitle.appendcChild(dtitle text); 
var ddesc = document.createElement("dd"); 
var ddesc_ text = document.createTextNode(definition); 
ddesc.appendChild(ddesc_text); 
dlist.appendChild(dtitle); 
dlist.appendChild(ddesc); 


var header = document.createElement("h2"); 

var header_text = document.createTextNode("Abbreviations"); 
header .appendChild(header_text); 

document body,.appendchild(header ) ; 

document .body.appendCchild(dlist); 


和 往常 一 样 ， 这 个 函数 还 有 不 少 需要 改进 的 余地 。 
02. 检查 兼容 性 


在 这 个 函数 的 开头 部 分 ， 应 该 安排 一 些 检 查 以 确保 浏览 右 能 够 理 
解 你 这 个 函数 里 用 到 的 那些 DOM 方 法 ， 这 个 函数 用 到 了 
getElementsByTagName 、createElement 和 
createTextNode。 你 可 以 分 别 检查 这 儿 个 方法 是 否 存 在 : 


if (!document.getElementsByTagName) return false; 
if (!document.createElement) return false; 


if (!document.createTextNode) return false; 


当然 ， 也 可 以 把 这 几 项 测试 合并 为 一 条 语句 : 


if (!document.getElementsByTagName || !document.createElement 


=|| !document .createTextNode) return false; 
区 别 ， 你 可 以 根据 自己 的 个 人 习惯 选择 一 种 使 


displayAbbreviations 函数 有 点 长 ， 应 该 在 它 的 代码 里 加 上 
一 此 全 焙 。 


function displayAbbreviations() { 

if (!document.getElementsByTagName || !document.createElement 
|| !document .createTextNode) return false; 

// 取得 所 有 缩 略 词 
var abbreviations = document.getElementsByTagName("abbr"); 
If (abbreviations.length < 1) return false,; 
var defs = new Array(); 


// 授 历 这 些 缩 略 词 
for (var i=0; i<abbreviations.length; i++) { 
var current_abbr = abbreviations[i]; 
var definition = current_abbr.getAttribute("title"); 
var key = current_abbr.]lastchild.nodeValue; 
defs[key] = definition; 


} 
// 创建 定义 列表 
var dlist = document.createElement("d1"); 
// 明 历 定义 
for (key in defs) { 
var definition = defs[key]; 
// 创建 定义 标题 
var dtitle = document.createElement("dt"); 
var dtitle text = document.createTextNode(key); 
dtitle.appendcChild(dtitle text); 
// 创建 定义 描述 
var ddesc = document.createElement("dd"); 
var ddesc_text = document.createTextNode(definition); 
ddesc.appendCchild(ddesc_text ) ， 
// 把 它们 添加 到 定义 列表 
dlist.appendChild(dtitle); 
dlist.appendChild(ddesc); 


} 
// 创建 标题 
var header = document.createElement("h2"); 
var header_text = document.createTextNode("Abbreviations"); 
header. SP Rs text ); 
// 把 标题 添加 到 页 面 主体 
document .body.appendChild(header); 
// 把 定义 列表 添加 到 页 面 主体 


document .body.appendCchild(dlist); 
} 


这 个 函数 应 该 在 页 面 加 载 时 被 调用 。 你 可 以 通过 window.on1load 
事件 来 做 到 这 一 点 : 


window.onload = displayAbbreviations,; 


为 了 日 后 能 够 方便 地 把 多 个 事件 添加 a 到 window.onload 处 理 卫 
数 上 ， 最 好 使 用 addLoadEvent 函数 来 完成 这 一 工作 。 首 先 ， 编 
写 addLoadEvent 函数 并 把 它 保存 为 一 个 新 的 JavaScript 脚 本 文 
件 ， 将 新 文件 命名 为 addLoadEvent .js 并 把 它 存 入 scripts 文 
件 夹 : 


function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = func; 
} else { 


window.onload = function() { 
oldonload( ); 
func( ); 


然后 ， 把 下 面 这 条 语句 添加 到 displayAbbreviations.js 文 


addLoadEvent(displayAbbreviations); 


现在 ，JavaScript 脚 本 文件 都 已 经 准备 好 了 。 接 下 来 ,为 了 调用 这 
两 个 JavaScript 脚 本 文件 ， 我 们 需要 在 explanation.html 文件 
的 <head> 部 分 添加 一 些 <script> 标签 ， 如 下 所 示 : 


<script src="scripts/addLoadEvent.js"></script> 


<script src="scripts/displayAbbreviations.js"></script> 


注意 ”请 确保 先 包 仿 addLoadEvent . js ， 因 为 
displayAbbreviations .js 依赖 于 它 。 在 真实 项 目 中 ， 
你 通常 还 需要 压缩 脚本 ， 并 把 它们 合并 成 一 个 文件 (如 第 5 章 
所 示 ) 。 对 我 们 的 例子 来 说 ， 保 持 多 个 JavaScript 文件 和 较 多 
的 见 余 空白 有 助 于 大 家 理解 和 试验 。 


03. 最 终 的 标记 


下 面 是 最 终 完成 的 explanation.html 文件 : 


<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Explaining the Document Object Model</title> 
<link rel="stylesheet" media="screen" 
=href="styles/typography.css" /> 
</head> 
<body> 
<hi>what is the Document Object Model?</h1> 
<p> 
The <abbr title="World Wide Web Consortium">wW3C</abbr> defines 
“the <abbr title="Document Object Model">DOM</abbr> as : 


</p> 
<blockquote cite="http://www.w3.org/DOM/"> 
<p> 
A platform- and language-neutral interface that will allow 
programs 


=and scripts to dynamically access and update the 
“content, structure and style of documents. 
</p> 

</blockquote> 

<p> 
It is an <abbr title="Application Programming 
Interface">API</abbr> 
-that can be used to navigate <abbr title="HyperText Markup 
Language"> 
=wHTML</abbr> and <abbr title="eXtensible Markup Language">XML 
</abbr> documents. 

</p> 

<script src="scripts/addLoadEvent.js"></script> 


<script src="scripts/displayAbbreviations.js"></script> 
</body> 
</html> 


现在 ， 把 explanation.html 文件 加 载 到 Web 浏 览 器 里 就 可 以 看 
到 displayAbbreviations 函数 的 效果 了 ， 如 图 8-3 所 示 。 


AAA Explaining the Document Object Model 【= 
E66 To 
What is the Document Object Model? 


The W3C defines the DOM as: 


A platform- and language-neutral interface that will allow programs and scripts to dynamically 
access and update the content, structure and style of documents 


lt is an API that can be used to navigate HTML and XML documents. 


Abbreviations 


World Wide Web Consortium 
Document Object Model 
Application Programming Interface 
HyperText Markup Language 
eXtensible Markup Language 


图 8-3 
8.4.3 一 个 浏览 器 “地 雷 ” 


在 此 以 前 ， 我 一 直 避 免 提 到 任何 特定 的 浏览 器 。 只 要 使 用 的 浏览 器 文 
持 DOM， 则 此 前 见 到 过 的 脚本 就 都 可 以 正常 工作 。 可 是 ， 这 个 
displayAbbreviations 函数 却 是 一 个 例外 。 


displayAbbreviations 函数 工作 得 确实 不 错 ， 除 非 你 使 用 的 浏览 
句 是 IE6 或 更 早 的 Windows 版 本 。 如 果 把 explanation.html 文件 加 
载 到 下 浏览 器 里 ， 不 仅 不 会 看 到 一 个 “ 缩 略 语 列表 ”， 还 极 有 可 能 会 看 到 
一 条 JavaScript 出 错 消息 。 


你 肯定 会 对 这 种 行为 感到 不 解 : 我 们 已 经 在 
displayAbbreviations 函数 的 开头 部 分 加 上 了 对 象 探 测 语句 ， 以 
确保 只 有 文 持 DOM 的 浏览 吉 才 会 去 执行 DOM 代 人 码 ， 正 浏览 右 对 
getElementsByTagName 和 getElementById 方法 的 支持 也 红 庸 
置疑 ， 为 什么 还 会 出 现 这 样 的 问题 呢 ? 


事情 还 要 从 本 书 第 1 章 里 提 到 的 浏览 絮 大 战 说 起 。 在 那 场 大 战 中 ， 网 景 
公司 和 微软 公司 曾 把 <abbr> 和 <acronym> 标签 当做 它们 的 武器 之 
一 。 在 竞争 最 激烈 时 ， 微 软 决 定 不 在 目 己 的 浏览 右 里 实现 abbr 元 素 。 


那 场 浏览 器 大 战 早已 烟消云散 ， 最 终 的 结果 是 微软 打败 了 网 景 ， 但 微 
软 的 正 浏 览 器 直到 IE7 才 支持 abbr 元 素 。displayAbbreviations 
函数 在 早期 版 本 中 失败 ， 是 因为 它 试 图 从 一 些 abbr 元 素 节点 那里 提取 
而 下 浏览 器 却 拒绝 承认 那些 abbr 节点 的 “元 
素 ” 地 位 。 


我 们 意外 地 踏 上 了 一 颗 在 一 场 早 已 结束 的 战争 中 埋藏 下 来 的 "地 雷 ”! 
可 供 选择 的 解决 方案 有 三 种 。 


。 把 abbr 元 素 统 一 替换 为 acronym 元 素 。 我 对 这 种 解决 方案 不 感 

兴趣 ， 因 为 我 不 想 为 了 迁就 一 种 顽固 不 化 的 浏览 器 而 “牺牲 ”一 大 

批语 义 正 确 的 标记 。 

在 元 素 中 使 用 html 命名 空间 
(<html:abbr>abbr</html:abbr>) ， 这 样 正 就 可 以 认 出 这 

些 元 素 。 这 个 方案 涉及 修改 标记 ， 如 果 要 在 其 他 的 文档 中 使 用 

displayAbbreviations 函数 ， 问 题 仍 得 不 到 解决 。 

保证 displayAbbreviations 函数 在 正中 能 够 平稳 退化 。 这 个 

方案 实现 起 来 最 简单 ， 也 最 容易 被 人 接受 。 只 要 多 写 儿 行 代码 ， 

IE (或 其 他 不 能 识别 abbr 元 素 的 浏览 器 ) 就 可 以 提前 退出 。 


所 以 ， 我 们 选用 第 三 种 。 


首先 ， 在 负责 从 abbr 元 素 提取 title 属性 值 和 文本 值 的 for 循环 里 
添加 一 条 语句 : 


for (var i=0; i<abbreviations.length; I++) { 


var current_abbr = abbreviations[i]; 

if (current_abbr.childNodes.length < 1) continue 
var definition = current_abbr.getAttribute("title"); 
var key = current_abbr.lastchild.nodevalue 
defs[key] = definition; 


这 条 新 增 语句 的 含义 是 : “如 果 当 前 元 素 没有 子 节 点 ， 束 立刻 开始 下 一 
次 循环 "。 因 为 下 浏览 器 在 统计 abbr 元 素 的 子 节点 个 数 时 总 是 会 返回 

一 个 错误 的 值 一 一 零 ， 所 以 这 条 新 语句 会 让 IE 浏 览 妖 不 再 继续 执行 这 

个 循环 中 的 后 续 代 码 。 


当 IE 浏 览 器 执行 到 displayAbbreviations 函数 中 负责 创建 “ 缩 略 语 
列表 ”的 那个 for 循环 时 ， 因 为 defs 数组 是 空 的 ， 所 以 它 将 不 会 创建 

出 任何 dt 和 dd 元 素 。 我 们 在 那个 for 循环 的 后 面 添加 这 样 一 条 语 

句 : 如 果 对 应 于 “ 缩 略 语 列表 ”的 那个 dl 元 素 没有 任何 子 节 点 ， 则 立刻 
退出 displayAbbreviations 函数 : 


// 创建 定义 列表 

var dlist = document.createElement("d1"); 

// 裔 历 所 有 定义 

for (key in defs) { 
var definition = defs[key]; 

// 创建 定义 标题 
var dtitle = document.createElement("dt"); 
var dtitle text = document.createTextNode(key); 
dtitle.appendchild(dtitle_ text); 

// 创建 定义 描述 
var ddesc = document.createElement("dd"); 
var ddesc_text = document.createTextNode(definition); 
ddesc.appendchild(ddesc_text ) 

// 把 它们 添加 到 定义 列表 
dlist.appendChild(dtitle); 
dlist.appendChild(ddesc); 


} 
if (dlist.childNodes.length < 1) return false; 


请 注意 ， 狐 添加 的 这 条 if 语句 又 一 次 违背 了 结构 化 程序 设计 原则 (一 
个 函数 应 该 具有 一 个 入 口 和 一 个 出 口 ) 一 一 它 等 于 是 在 函数 的 中 间 增 
加 了 一 个 出 口 点 。 但 这 应 该 是 既 可 以 解决 正 浏 览 器 的 问题 ， 又 不 需 
对 现 有 的 函数 代码 大 动 干戈 的 最 简单 的 办 法 了 。 


下 面 古 改进 函数 之 后 的 代码 清单 : 


function displayAbbreviations() { 
if (!document.getElementsByTagName || !document.createElement 
=|| !document ,createTextNode) return false; 
// 取得 所 有 缩 略 词 
var abbreviations = document.getElementsByTagName("abbr"); 
if (abbreviations.length < 1) return false; 
var defs = new Array(); 
// 明 历 所 有 缩 略 词 
for (var i=0; i<abbreviations.length; I++) { 
var current_abbr = abbreviations[i]; 
if (current_abbr.childNodes.1length < 1) continue; 
var definition = current_abbr.getAttribute("title"); 
var key = current_abbr.lastchild.nodeValue; 
defs[key] = definition; 


} 
// 创建 定义 列表 
var dlist = document.createElement("d1"); 
// loop through the definitions 
for (key in defs) { 
var definition = defs[key]; 
// 创建 定义 标题 
var dtitle = document.createElement("dt"); 
var dtitle text = document.createTextNode(key); 
dtitle.appendchild(dtitle_ text); 
// 创建 定义 描述 
var ddesc = document.createElement("dd"); 
var ddesc_text = document.createTextNode(definition); 
ddesc.appendCchild(ddesc_text ) ， 
// 把 它们 添加 到 定义 列表 
dlist.appendChild(dtitle); 
dlist.appendChild(ddesc); 


} 
if (dlist.childNodes.length < 1) return false; 
// 创建 标题 
var header = document.createElement("h2"); 
var header_text = document.createTextNode("Abbreviations"); 
header. appendchild(header text ) ， 
// 把 标题 添加 到 页 面 主体 
document .body.appendChild(header); 
// 把 定义 列表 添加 到 页 面 主体 
document .body.appendChild(dlist); 
} 


这 两 条 新 语句 将 确保 expLlanation,html 文档 就 算 遇 到 那些 不 理解 
abbr 元 素 的 浏览 器 也 不 会 出 问题 。 它 们 就 像 是 一 条 保险 绳 ， 其 作用 与 
脚本 开头 部 分 的 对 象 探 测 语句 很 相似 。 


注意 ”即使 某 种 特定 的 浏览 器 会 引起 问题 ， 也 没有 必要 使 用 浏览 
器 嗅 探 代码 。 对 浏览 器 的 名 称 和 版 本 号 进行 嗅 探 的 办 法 很 难 做 到 
面面俱到 ， 而 且 往 往 会 导致 非 单 复杂 难 解 的 代码 。 


我 们 已 经 成 功 地 排除 了 一 颗 在 过 去 的 浏览 大 大战 中 簿 留 下 来 的 "地 

雷 ”。 如 条 有 什么 教训 的 话 ， 那 吏 是 它 可 以 让 我 们 深刻 地 体会 到 标准 的 
重要 性 。 仅 仅 因 为 正 浏览 器 不 文 持 abbr 元 素 ， 就 使 得 一 大 批 用 户 没有 
机 会 看 到 一 个 目 动 生成 的 “ 缩 略 语 列表 ”， 这 个 事实 让 我 感到 很 遗憾 ， 

但 这 些 用 户 仍 能 看 到 页 面 上 的 核心 内 容 。 缩 略语 列表 是 一 种 很 好 的 增 
强 补充 ， 它 还 算 不 上 有 是 页 面 必 不 可 少 的 组 成 部 分 。 如 果 它 真 的 必 不 可 
少 ， 从 一 开始 吏 应 该 把 它 包 括 在 标记 里 。 


8.5 ”显示 “文献 来 源 链 接 表 ” 


displayAbbreviations 函数 是 一 个 充实 文档 内 容 的 好 例子 (至 少 
对 那些 不 是 正 的 浏览 器 来 说 是 如 此 ) 。 它 从 文档 结构 提取 出 了 一 些 内 
容 并 以 一 种 清晰 的 方式 显示 出 来 。 那 些 原 本 包含 在 abbr 标签 的 title 
属性 里 的 信息 现在 直接 呈现 在 了 浏览 器 窗口 里 。 现 在 ， 我 们 来 看 另 一 
ee 。 请 大 家 仔细 看 explanation.html 文档 中 的 这 段 
示 记 : 


<blockquote cite="http://www.w3.org/DOM/"> 
<p> 
A platform- and language-neutral interface that will allow programs 


=and scripts to dynamically access and update the 
“content, structure and style of documents. 

</p> 
</blockquote> 


blockquote 元 素 包含 一 个 属性 cite 。 这 是 一 个 可 选 属性 ， 你 可 以 
给 它 一 个 URL 地 址 ， 告 诉 人 们 blockquote 元 素 的 内 容 引 自 哪里 。 从 
理论 上 讲 ， 这 是 一 个 把 文献 资料 与 相关 网 页 链接 起 来 的 好 办 法 ， 但 在 
实践 中 ， 浏 览 妖 会 完全 忽视 cite 属性 的 存在 。 虽 然 信息 束 在 那里 ， 但 


用 户 却 无 法 看 到 它们 。 利 用 JavaScript 语 言 和 DOM， 我 们 完全 可 以 把 那 
些 信 息 收 集 起 来 ， 并 以 一 种 更 有 意义 的 方式 把 它们 显示 在 网 页 上 。 


我 们 计划 按照 以 下 步骤 将 文献 以 链接 形式 显示 出 来 。 

(1) 通 历 这 个 文档 里 所 有 blockquote 元 素 。 

(2) 从 blockquote 元 素 提 取出 cite 属性 的 值 。 

(3) 创建 一 个 标识 文本 是 source 的 链接 。 

(4) 把 这 个 链接 赋值 为 blockquote 元 素 的 cite 属性 值 。 

(5) 把 这 个 链接 插入 到 文献 节选 的 末尾 。 

We 我 们 将 根据 上 述 步 又 编写 一 个 JavaScript 函 


编写 displayCitations 画 数 


我 们 将 新 函数 命名 为 displayCcitations ， 将 它 保存 在 
displayCitations .js 文件 中 。 


首先 ， 因 为 它 不 需要 任何 参数 ， 所 以 函数 名 后 面 的 圆 括 号 将 是 空 的 : 


function displayCitations() { 


第 一 步 是 把 文档 里 的 所 有 blockquote 元 素 找 出 来 。 使 用 
getElementsByTagName 方法 完成 这 项 查找 工作 ， 并 把 找到 的 节点 
集合 保存 为 变量 quotes : 


var quotes = document.getElementsByTagName("blockquote"); 


接 下 来 过 有 历 这 个 集合 : 


for (var i=0; i<quotes.length; i ++) { 


在 这 个 循环 里 ， 我 们 只 对 有 cite 属性 的 文献 节选 感 兴 趣 。 我 们 用 一 个 
人 简单 的 测试 检查 本 次 循环 中 的 当前 文献 节选 有 没有 这 个 属性 。 


用 getAttribute 方法 测试 和 点 集合 quotes 中 的 当前 元 素 ( 即 
quotes[i] ) ， 如 果 getAttribute("cite") 的 结果 为 真 ， 就 说 
明 这 个 节点 有 cite 属性 ， 如 果 !1getAttribute("cite") 的 结果 为 
真 ， 就 说 明 这 个 节点 没有 cite 属性 。 如 果 是 后 一 种 情况 ， 使 用 
continue 立刻 跳 到 下 一 次 循环 ， 不 再 继续 执行 本 次 循环 中 的 后 续 语 
颁 ]: 


if (lquotes[i].getAttribute("cite")) { 


continue; 


} 


也 可 以 把 这 条 语句 写成 下 面 这 样 : 


If (lquotes[i].getAttribute("cite")) continue; 


2 前 blockquote 元 素 有 cite 属性 的 情况 下 才 
pe 


首先 ， 得 到 当前 blockdquote 元 素 的 cite 属性 值 并 把 它 存 入 变量 ur1 


var url = quotes[i].getAttribute("cite"); 


下 一 步 是 确定 应 该 把 “文献 来 源 链接 ” 放 到 何 处 。 这 似乎 是 一 项 非常 入 
单 的 任务 。 


01. 查找 你 的 元 素 


一 个 blockquote 元 素 必 定 包含 块 级 元 素 ， 如 文本 段落 ， 以 容纳 
被 引用 的 大 段 文本 。 我 们 想 把 “文献 来 源 链接 ” 放 在 blockduote 
元 素 所 包含 的 最 后 一 个 子 元 素 方 点 之 后 。 显 然 我 们 应 该 先 找到 当 
前 blockquote 元 素 的 lastchild 属性 : 


quotes[i].lastchild 


J 这 样 我们 融会 遇 到 一 个 问题 。 请 大 家 再 仔细 看 看 这 段 标 
i: 


<blockquote cite="http://www.w3.org/DOM/"> 

<p> 
A platform- and language-neutral interface that will allow 
programs 


=and scripts to dynamically access and update the 
“content, structure and style of documents. 

</p> 
</blockquote> 


乍 看 起 来 ， blockquote 元 素 的 最 后 一 个 子 节 点 应 该 是 那个 p 元 
素 ， 而 这 意味 着 1astchild 属性 的 返回 值 将 是 一 个 p 元 素 节 点 。 
可 是 ， 事 实 却 并 不 一 定 如 此 。 


那个 p 节点 的 确 是 plockquote 元 素 的 最 后 一 个 元 素 节 点 。 但 在 
</p> 标签 和 </b1lockquote> 标签 之 间 还 存在 着 一 个 换行 符 。 有 
些 浏览 器 会 把 这 个 换行 符 解 释 为 一 个 文本 节点 。 这 样 一 来 ， 
blockquote 元 素 节 点 的 LastCchild 属性 就 将 是 一 个 文本 节点 
而 不 是 那个 p 元 素 帮 点 。 


注意 ”在 编写 DOM 脚 本 时 ， 你 会 想当然 地 认为 某 个 节点 肯定 
征 一 个 元 素 和 点， 这 是 一 种 相当 各 见 的 错误 。 如 有 果 没 有 百 分 
之 百 的 把 握 ， 就 一 定 要 去 检查 nodeType 属性 值 。 有 很 多 

DOM 方 法 只 能 用 于 元 素 斑 点， 如 果 用 在 了 文本 万 点 身上 ， 融 


pa 


DOM 已 经 提供 了 一 个 非 第 有 用 的 lastchild 属性 ， 如 采 它 能 
为 我 们 提供 一 个 lastchildElement 属性 就 更 好 了 “。 但 令 人 遗憾 
的 是 它 没 有 。 还 好 ， 你 可 以 利用 已 有 的 DOM 方 法 和 属性 编写 一 些 
语句 ， 完 成 这 项 任务 。 


你 可 以 把 包含 在 当前 blockquote 元 素 里 的 所 有 元 素 节 点 找 出 
来 。 如 果 把 通配符 “* ”作为 参数 传递 给 getElementsByTagName 
人 它 就 会 把 所 有 的 元 素 ， 不 管 标 签名 是 什么 ， 一 一 返回 给 我 

站 j: 


var quoteElements = quotes[i].getElementsByTagName("*"); 


变量 quoteElements 是 一 个 数组 ， 它 包含 当前 blockquote 元 
素 ( 即 quotes[i] ) 所 包含 的 全 体 元 素 节 点 。 


现在 ，blockquote 元 素 所 包含 的 最 后 一 个 元 素 节 点 将 对 应 着 
quoteElements 数组 中 的 最 后 一 个 元 素 。 数 组 中 的 最 后 一 个 元 
素 的 下 标 等 于 数组 的 长 度 减 去 1， 因 为 数组 的 下 标 从 零 开 始 。 记 
住 ， 数 组 中 的 最 后 一 个 元 素 的 下 标 不 等 于 数组 的 长 度 ， 而 是 数组 
的 长 度 减 去 1: 


var elem = quoteElements[quoteElements.1length - 1]; 


现在 ， 变 量 elem 对 应 blockquote 元 素 所 包含 的 最 后 一 个 元 素 
有 点 。 


回 到 我 们 正在 displaycitations 函数 里 编写 的 那个 循环 ， 下 面 
是 已 经 写 出 来 的 代码 : 


for (var i=0; i<quotes.length; i++) { 
If (lquotes[i].getAttribute("cite")) continue; 
var url = quotes[i].getAttribute("cite"); 


var quoteChildren = quotes[i].getElementsByTagName('*'); 
var elem = quoteChildren[quoteChildren.length - 1]; 


与 其 假设 quoteChildren 变量 肯定 返回 一 个 元 素 节点 数组 ， 不 
如 增加 一 项 测试 来 检查 它 的 长 度 是 否 小 于 1。 如 果 是 ， 就 用 关键 字 
continue 立刻 退出 本 次 循环 : 


for (var i=0; i<quotes.length; i++) { 
if (!quotes[i].getAttribute("cite")) continue; 
var Url = quotes[i].getAttribute("cite"); 


var quoteChildren = quotes[i].getElementsByTagName('*'); 
if (quoteChildren.length < 1) continue; 
var elem = quoteChildren[quoteChildren.length - 1]; 


我 们 已 经 把 创建 一 个 链接 所 需要 的 东西 全 准备 好 了 。 变 量 ur1 包 
含 着 将 成 为 那个 链接 的 href 属性 值 的 字符 串 ，elem 变量 包含 着 
将 成 为 那个 链接 在 文档 中 的 插入 位 置 的 斑点 。 

02. 创建 链接 


用 createElement 方法 创建 一 个 “链接 ”元 素 : 


var link = document.createElement("a"); 


接 下 来 ， 为 那个 新 链接 创建 一 条 标识 文本 。 用 createTextNode 
方法 创建 一 个 内 容 为 sSource 的 文本 节点 : 


var link_text = document.createTextNode("source"); 


现在 ， 变 量 Link 包含 新 创建 的 a 元 素 ， 变 量 1ink_text 包含 着 
新 创建 的 文本 节点 。 


用 appendchild 方法 把 新 的 文本 市 点 插入 新 链接 : 


link.appendChild(1link_text); 


把 href 属性 添加 给 新 链接 。 用 setAttribute 方法 把 它 设置 为 


变量 url 的 值 : 


link.setAttribute("href",url); 


新 链接 已 经 创建 好 了 ， 可 以 插入 文档 中 了 。 
03. 插入 链接 


你 可 以 就 这 样 把 它 插 入 文档 ， 也 可 以 先 用 男 一 个 元 素 ， 比 如 sup 
元 素 ， 包 洲 它 ， 使 它 在 浏览 如 里 呈现 出 上 标的 效果 。 


创建 一 个 sup 元 素 节 点 并 把 它 存 入 变量 superscript : 


var superscript = document.createElement("sup"); 


把 新 链接 放 入 这 个 sup 元 素 : 


superscript.appendchild(1ink); 


现在 ， 有 了 一 个 存在 于 JavaScript 上 下 文中 的 DocumentFragment 
对 象 ， 它 此 时 尚未 被 插入 任何 文档 : 


<sup><a href="http://www.w3.org/DOM/">source</a></sup> 


为 了 把 这 个 标记 插入 文档 ， 你 要 把 变量 superscript 追加 为 变量 
elenm 的 最 后 一 个 子 节 点 。 因 为 变量 elem 对 应 着 blockquote 元 
素 目前 所 包含 的 最 后 一 个 元 素 节 点， 这 个 上 标 形式 的 新 链接 将 出 
现在 文献 节选 的 后 面 : 


elem.appendcChild(superscript); 


| 


最 后 ， 先 用 一 个 右 花 括号 结束 这 个 for 循环 ， 再 用 一 个 右 花 括号 
结束 整个 画 数 。 


下 面 是 displayCitations 函数 到 目前 为 止 的 代码 清单 : 


function displayCitations() { 

var quotes = document.getElementsByTagName("blockquote"); 

for (var i=0; i<quotes.length; i++) { 
if (!quotes[i].getAttribute("cite")) continue; 
var url = quotes[i].getAttribute("cite"); 
var quoteChildren = quotes[i].getElementsByTagName('*'); 
if (quoteChildren.length < 1) continue; 
var elem = quoteChildren[quoteCchildren.length - 1]; 
var link = document.createElement("a"); 
var link_text = document.createTextNode("source"); 
link.appendcChild(1link_text); 
link.setAttribute("href",ur]l); 
var superscript = document.createElement("sup"); 
superscript.appendchild(1ink); 
elem.appendchild(superscript); 


. 改进 脚本 


依照 惯例 ， 总 是 会 有 需要 改进 的 地 方 。 在 这 个 函数 的 开头 部 分 增 
加 一 些 测试 ， 以 确保 浏览 絮 能 够 理解 这 个 函数 里 用 到 的 DOM 方 
法 。 为 了 让 代码 更 易于 理解 ， 你 还 应 该 加 上 一 些 注释 : 


function displayCitations() { 
if (!document.getElementsByTagName || 
Idocument .createElement 


=|| !document ,createTextNode) return false; 
// 取得 所 有 引用 
var quotes = document.getElementsByTagName("blockquote"); 
// 遍历 引用 
for (var i=0; i<quotes.length; i++) { 
// 如 果 没 有 cite 属性 ， 继 续 循 环 
If (!quotes[i].getAttribute("cite")) continue; 
// 保存 cite 属性 
var url = quotes[i].getAttribute("cite"); 


上 册 


// 取得 引用 中 的 所 有 元 素 节 点 
var quoteChildren = quotes[i].getElementsByTagName('*'); 
// 如 果 没 有 元 素 节 点 ， 继 续 循 环 
if (quotechildren.,.Jlength < 1) continue 
// 取得 引用 中 的 最 后 一 个 元 素 节 点 
var elem = quoteChildren[quoteChildren.length - 1]; 
// 创建 标记 
var link = document.createElement("a"); 
var link_text = document.createTextNode("source"); 
link.appendcChild(1link_text); 
link.setAttribute("href",url); 
var superscript = document.createElement("sup"); 
superscript.appendchild(1link); 
// 把 标记 添加 到 引用 中 的 最 后 一 个 元 素 节 点 


elem,appendCchild(Ssuperscript )， 


用 addLoadEvent 函数 调用 displayCitations 函数 ; 


addLoadEvent(displayCitations); 


05. 最 终 的 标记 


为 了 调用 displaycitations .js 文件， 还 需要 在 文档 末尾 添加 
一 组 <script> 标签 : 


<!IDOCTYPE html> 


<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Explaining the Document Object Model</title> 
<link rel="stylesheet" media="screen" 
=href="styles/typography.css" /> 
</head> 
<body> 
<hi>what is the Document Object Model?</h1> 
<p> 
The <abbr title="World Wide Web Consortium">wWw3C</abbr> defines 
“the <abbr title="Document Object Model">DOM</abbr> as: 
</p> 
<blockquote cite="http://www.w3.org/DOM/"> 
<p> 


A platform- and language-neutral interface that will allow 
programs 
=wand Scripts to dynamically access and update the 
wcontent, structure and style of documents. 
</p> 
</blockquote> 
<p> 
It is an <abbr title="Application Programming 
Interface">API</abbr> 
“that can be used to navigate <abbr title="HyperText Markup 
Language"> 
wwHTML</abbr> and <abbr title="eXtensible Markup Language">XML 
=</abbr> documents. 
</p> 
<script src="scripts/addLoadEvent.js"></script> 
<script src="scripts/displayAbbreviations.js"></script> 
<script src="scripts/displayCitations.js"></script> 
</body> 
</html> 


现在 ， 把 explanation .html 文件 加 载 到 一 个 Web 浏 览 器 里 就 可 
以 看 到 效果 了 ， 如 图 8-4 所 示 。 


AAA Explaining the Document Object Model | 
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图 8-4 


8.6 ”显示 “快捷 键 清单 ” 


此 前 编写 的 dijsplayAbbreviations 和 displayCitations 函数 
有 许多 共同 之 处 ， 从 创建 一 个 由 特定 元 素 (abbr 元 素 或 bplockquote 
元 素 ) 构成 的 万 点 集合 开始 ， 用 一 个 循环 去 遍历 这 个 世 点 集合 并 在 每 
次 循环 里 创建 出 一 些 标记 ， 最 后 把 新 创建 的 标记 插入 到 文档 里 。 


让 我 们 党 着 这 一 思路 再 看 一 个 例子 。 我 们 编写 一 个 函 效 、 把 文档 里 能 
用 到 的 所 有 快捷 链 显 示 在 页 面 里 。 


accesskey 属性 可 以 把 一 个 元 素 (如 链接 ) 与 键 一 上 的 某 个 特定 按键 
关联 在 一 起 。 这 对 那些 不 能 或 不 喜欢 使 用 鼠标 来 浏览 网 页 的 人 们 很 有 
用 。 对 于 有 视力 障碍 的 人 士 ， 键 盘 快 捷 方 式 肯定 会 带 来 许多 方便 。 

一 般 来 说 ， 在 适用 于 Windows 系 统 的 浏览 器 里 ， 快 捷 键 的 用 法 是 在 键盘 
上 同时 按 下 Alt 键 和 特定 按键 ， 在 适用 于 Mac 系 统 的 浏览 器 里 ， 快 捷 键 
的 用 法 是 同时 按 下 Ct 键 和 特定 按键 。 


下 面 是 accesskey 属性 是 一 个 例子 : 


<a href="index.html" accesskey="1">Home</a> 


注意 ”设置 太 多 的 快捷 键 往往 会 适得其反 一 一 它们 或 许 会 与 浏览 
器 内 建 的 键盘 快捷 方式 发 生 冲 突 。 


文 持 accesskey 属性 的 浏 贤人 器 有 很 多 ， 但 是 否 以 及 如 何 把 快捷 键 的 分 
配 情况 显示 在 页 面 上 却 需要 由 身 为 网 页 设计 人 员 的 你 们 来 决定 。 有 许 
多 网 站 都 会 在 一 个 快捷 键 清单 (accessibility statement ) 页 
面 上 列 明 该 网 站 都 支持 哪些 快捷 刍 。 


一 些 基本 的 快捷 键 都 有 约定 俗 成 的 设置 办 法 ， 对 此 感 兴趣 的 读者 可 以 
浏览 http:W/www.clagnut.comy/blog/193/。 


。accesskey="1" 对 应 着 一 个 “返回 到 本 网 站 主页 ”的 链接 ; 
。 accesskey="2" 对 应 着 一 个 “后 退 到 前 一 页 面 > 的 链接 ; 


。accesskey="4" 对 应 春 一 个 “打开 本 网 站 的 搜索 表单 /页 面 > 的 链 
接 ; 

。accesskey="9" 对 应 着 一 个 “本 网 站 联系 办 法 ”的 链接 ; 

。accesskey="0" 对 应 着 一 个 “得 看 本 网 站 的 快捷 键 清单 ?的 链 
接 。 


下 面 是 一 个 网 站 导航 清单 的 例子 ， 使 用 了 快捷 链 : 


<ul id="navigation"> 
<] 1><a href="index.html" accesskey="1">Home</a></1i> 
<]1i><a href="search.html" accesskey="4">Search</a></1i> 


<]1i><a href="contact.html" accesskey="0">Contact</a></1i> 
</U]> 


把 这 段 标记 添加 到 explLlanation,html 文档 的 <body> 开标 签 的 后 
面 。 


现在 ， 如 果 把 explanation.html 文档 加 载 到 一 个 浏览 器 里 ， 你 就 会 
看 到 这 份 清单 里 的 链接 ， 但 看 不 到 任何 能 表明 这 些 链接 都 有 
accesskey 属性 的 东西 。 


0 可 以 动态 地 创建 一 份 快捷 键 清单 。 下 面 是 具体 的 步 


(1) 把 文档 里 的 所 有 链接 全 部 提取 到 一 个 节点 集合 里 。 
(2) 遍历 这 个 节点 集合 里 的 所 有 链接 。 

(3) 如 果 某 个 链接 带 有 accesskey 属性 ， 就 把 它 的 值 保存 起 来 。 
(4) 把 这 个 链接 在 浏览 器 窗口 里 的 屏 显 标识 文字 也 保存 起 来 。 

(5) 创建 一 个 清单 。 

(6) 为 拥有 快捷 键 的 各 个 链接 分 别 创建 一 个 列表 项 (11 元素) 。 
(7) 把 列表 项 添加 到 “快捷 键 清单 "里 。 


(8) 把 “快捷 键 清单 "添加 到 文档 里 。 
和 前 面 的 例子 一 样 ， 按 照 以 上 步骤 编写 丽 数 。 


把 这 个 函数 命名 为 displayAccessKeys 并 存 入 
displayAccessKeys.js 文 件 。 


这 个 函数 的 工作 原理 与 displayAbbreviations 函数 很 相似 : 先 把 
accesskey 属性 值 和 相关 链接 的 屏 显 标识 文本 提取 出 来 并 存 入 一 个 天 
联 数 组 ， 然 后 用 一 个 for/in 循环 来 忆 历 这 个 数组 以 创建 各 个 列表 项 。 


不 再 逐 行 讲解 ， 下 面 和 最 终 完 成 的 函数 代码 清单 。 代 码 中 的 注释 语句 
可 以 把 各 个 步 又 解释 清楚 。 


function displayAccesskeys() { 
if (!document.getElementsByTagName || !document.createElement || 
学 1document .createTextNode) return false; 


// 取得 文档 中 的 所 有 链接 
var links = document.getElementsByTagName("a"); 
// 创建 一 个 数组 ， 保 存 访问 键 
var akeys = new Array(); 
// 遍历 链接 
for (var i=0; i<links.length; I++) { 
var current_link = links[i]; 
// 如 果 没 有 accesskey 属性 ， 继 续 循 环 
if (!current_link.getAttribute("accesskey")) continue 
// 取得 accesskey 的 值 
var key = current_link.getAttribute("accesskey"); 
// 取得 链接 文本 
var text = current_ link.lastchild.nodeVvalue; 
// 添加 到 数组 
akeys[key] = text; 


es 


} 
// 创建 列表 
var list = document.createElement("ul"); 
// 遍历 访问 键 
for (key in akeys) { 
var text = akeys[key]; 


// 创建 放 到 列表 项 中 的 字符 
Var str = key + ": "+text,; 
// 创建 列表 项 


var item = document.createElement("1i"); 
var item text = document.createTextNode(str); 
item.appendChild(item text); 


// 把 列表 项 添加 到 列表 中 
1ist.appendCchild(Iitem)， 


} 

// 创建 标题 
var header = document.createElement("h3"); 
var header_text = document.createTextNode("Accesskeys"); 
header .appendcChild(header_text); 

// 把 标题 添加 到 页 面 主体 
document .body.appendChild(header); 

// 把 列表 添加 到 页 面 主体 
document .body.appendCchild(1ist); 


addLoadEvent (displayAccesskeys); 


为 了 调用 displayAccessKeys .js 文件 ， 还 需要 在 
explanation.html 文件 的 <head> 部 分 0 标签 


<script src="scripts/displayAccesskeys.js"></script> 


现在 ， 如 果 把 explanation .html 文档 加 载 到 一 个 浏览 器 里 ， 就 可 以 
看 到 动态 创建 的 “快捷 键 清单 “， 如 图 8-5 所 示 。 


Explaining the Document Dbject Model 


EE 


What is the Document Object Model? 


The W3C defines the DOM as: 


Aplatform- and language-neutra interface that will allow programs ti to dynamically 
access and upda'e the content, structu’e and style of documents. Souee 


lis an API that can be Jsed to navigale HTML and XML documents. 


Abbreviations 


World Wide Web Consortlium 
Document Object Model 
Application Programming Interface 
HyperText Markup Language 
eXitensible Markup Language 


图 8-5 
8.7 ”检索 和 添加 信息 


本 章 编 写 了 儿 个 很 有 用 的 脚本 ,你 可 以 把 这 几 个 脚本 用 到 任何 一 个 网 
页 里 。 虽 然 它 们 用 途 不 一 ， 但 基本 思路 站 相同 的 : 用 JavaScript 函 数 先 
把 文档 结构 里 的 一 些 现 有 信息 提取 出 来 ， 表 把 那些 信息 以 一 种 清晰 和 
有 意义 的 方式 重新 插入 到 文档 里 去 。 


这 些 丽 数 可 以 让 网 页 变 得 更 有 条 理 、 更 容易 浏览 。 
。 把 文档 里 的 缩 略 语 显示 为 一 个 " 缩 略语 列表 ”。 
。 为 文档 里 引用 的 每 段 文献 节选 生成 一 个 "文献 来 源 链接 ” 。 
。 把 文档 所 支持 的 快捷 键 显示 为 一 份 快 捷 键 清单 ”。 


你 可 以 根据 具体 情况 对 这 些 脚本 做 进一步 改进 。 比 如 说 ， 我 们 这 里 是 
把 “文献 来 源 链 接 " 直 接 显 示 在 每 个 blockquote 元 素 的 后 面 ， 而 你 可 


以 把 这 些 链接 集中 放 在 文档 末尾 的 一 个 清单 里 一 一 忠 像 脚注 那样 。 青 
比如 说 ， 我 们 这 里 生成 了 一 份 < 快捷 键 清单 ”， 而 你 可 以 把 各 个 快捷 键 
分 别 追 加 在 相关 链接 的 末尾 。 


当然 可 以 利用 本 草 介绍 的 技术 去 编写 一 些 全 新 的 脚本 。 例 如 ， 可 以 为 
文档 生成 一 份 目 录 : 把 文档 里 的 h1 和 h2 元 素 提 取出 来 放 入 一 份 清 
单 ， 再 将 其 插入 到 文档 的 开头 。 甚 至 可 以 把 这 份 请 单 里 的 列表 项 增强 
为 一 些 可 以 让 用 户 快 速 到 达 各 有 关 标 题 的 内 部 链接 。 


只 需要 少量 DOM 方 法 和 属性 ， 束 可 以 创建 这 些 有 用 的 脚本 。 如 条 你 想 
通过 DOM 脚 本 去 充实 网 页 的 内 容 ， 制 作 一 份 结构 民 好 的 标记 文档 将 是 
最 重要 的 前 提 条 件 。 


在 需要 对 文档 里 的 现 有 信息 进行 检索 时 ， 以 下 DOM 方 法 最 有 用 : 


。 getElementById 
。 getElementsByTagName 
。 getAttribute 


在 需要 把 信息 添加 到 文档 里 去 时 ， 以 下 DOM 方 法 最 有 用 : 


createElement 
createTextNode 
appendChild 
insertBefore 
setAttribute 


以 上 DOM 方 法 的 组 合 可 以 让 我 们 编写 出 功能 非常 强大 的 DOM 脚 本 来 。 
希望 大 家 始终 记 住 ，JavaScript 脚 本 只 应 该 用 来 充实 文档 的 内 容 ， 要 避 
免 使 用 DOM 技 术 来 创建 核心 内 容 。 

8.8 小结 


至 此 ， 我 们 一 直 在 使 用 JavaScript 语 言 和 和 DOM 去 维护 和 创建 标记 。 在 下 
一 章 里 ， 你 将 看 到 DOM 的 一 种 全 新 应 用 ， 它 将 展示 如 何 运用 DOM 去 处 
理 诸如 颜色 、 字 体 等 样式 信息 。DOM 技 术 不 仅 可 以 用 来 改变 网 页 的 结 
构 ， 还 可 以 用 来 更 新 HTML 页 面 元 素 的 CSS 样 式 。 


第 9 章 CSS-DOM 


本 章 内 容 
。style 属性 
。 如 何 检索 样式 
。 如 何 改变 样式 


在 本 章 里 ，Web 文 档 的 表示 层 和 行为 层 将 正面 接触 。 我 将 展示 如 何 利用 
DOM 技 术 去 获取 ( 读 ) 和 设置 ( 写 ) CSS 信 息 。 


9.1 三 位 一 体 的 网 页 


ee 以 下 三 层 信息 构成 的 一 个 共同 


。 结构 层 

。 表示 层 

。 行为 层 
9.1.1 ”结构 层 
网 页 的 结构 层 (structural layer) 由 HTML 或 XHTML 之 类 的 标记 语言 负 
责 创 建 。 标签 〈tag) ， 也 就 是 那些 出 现在 尖 括 号 里 的 单词 ， 对 网 页 内 
容 的 语义 含义 做 出 了 描述 ， 例 如 ，<p> 标签 表达 了 这 样 一 种 语义 : “这 


是 一 个 文本 段 。” (如 图 9-1 所 示 。) 但 这 些 标签 并 不 包含 任何 关于 内 容 
如 何 显 示 的 信息 。 


<p>An example of a paragraph</p> 


AAA Example | 
BOQMmevro: 


An example of a paragraph 


Done py 


图 9-1 


9.1.2 ”表示 层 


表示 层 (presentation layer) 由 CSS 负 责 完 成 。CSS 描 述 页 面 内 容 应 该 
如 何 呈 现 。 你 可 以 定义 这 样 一 个 CSS 来 声明 : “文本 段 应 该 使 用 灰色 的 
Arial 字 体 和 男 外 几 种 scan-serif 字 体 来 显示 。” 如 图 9-2 所 示 。 


: Qrey, 


font-family: "Arial", sans-serif; 


Example 


An example of a paragraph 


图 9-2 
9.1.3 行为 层 


行为 层 (behavior layer) 负责 内 容 应 该 如 何 响 应 事件 这 一 问题 。 这 是 
JavaScript 语 言 和 和 DOM 主 罕 的 领域 。 例 如 ， 我 们 可 以 利用 DOM 实 现 这 样 
一 种 行为 : “ 当 用 户 点 击 一 个 文本 段 时 ， 显 示 一 个 alert 对 话 框 。” 如 
图 9-3 所 示 。 


var paras = document.getElementsByTagName("p"); 
for (var i=0; i<paras.length; I++) { 
paras[i].onclick = function() { 


alert("You clicked on a paragraph."); 


Example 


You clicked on a paragraph. 


oO 


图 9-3 


网 页 的 表示 层 和 行为 层 总 是 存在 的 ， 即 使 未 明确 地 给 出 任何 具体 的 指 
令 也 是 如 此 。 此 时 ，Web 浏 览 器 将 应 用 它 的 默认 样式 和 默认 事件 处 理 画 
数 。 例 如 ， 浏 览 器 会 在 呈现 "文本 段 * 元 素 时 留 出 页 边 距 ， 当 用 户 把 鼠 
标 指针 县 停 在 某 个 元 素 的 上 方 时 ， 有 些 浏览 器 会 弹出 一 个 显示 着 该 元 
素 的 title 属性 值 的 提示 框 ， 等 等 。 


9.1.4 分离 


在 所 有 的 产品 设计 活动 中 ， 选 择 最 适用 的 工具 去 解决 问题 是 最 基本 的 
原则 。 具 体 到 网 页 设计 工作 ， 这 意味 着 : 


。 使 用 (X)HTML 去 搭建 文档 的 结构 ; 
。 使 用 CSS 去 设置 文档 的 呈现 效果 ; 
。 使 用 DOM 脚 本 去 实现 文档 的 行为 。 


不 过 ， 在 这 三 种 技术 之 间 存 在 着 一 些 潜在 的 重 垒 区域， 你 也 已 见 过 这 
样 的 例子 。 用 DOM 可 以 改变 网 页 的 结构 ， 诸 如 createElement 和 


appendChild 之 类 的 DOM 方 法 允许 你 动态 地 创建 和 添加 标记 。 


在 CSS 上 也 有 这 种 技术 相互 重 车 的 例子 。 诸 如 :hover 和 :focus 之 类 
的 伪 类 允许 你 根据 用 户 触发 事件 改变 元 素 的 呈现 效果 。 改 变 元 素 的 呈 
现 效果 当然 是 表示 层 的 “势力 范围 >， 但 响应 用 户 触发 的 事件 却 是 行为 
层 的 领地 。 表 示 层 和 行为 层 的 这 种 重 车 形成 了 一 个 灰色 地 带 。 


没 错 ，CSS 正 在 利用 伪 类 走 进 DOM 的 领地 ， 但 DOM 也 有 反击 之 道 。 你 
可 以 利用 DOM 样 式 给 元 素 设 定 样 式 。 


9.2 style 属性 


文档 中 的 每 个 元 素 都 是 一 个 对 象 ， 每 个 对 象 义 有 着 各 种 各 样 的 属性 。 
有 一 些 属性 告诉 我 们 元 聚 在 万 点 树 上 的 位 置信 息 。 比 如 说 ， 
parentNode 、 nextSibling 、previousSibling 
childNodes 、firstcChild 和 lastchild 这 些 属性 ， 就 告诉 了 我 
们 文档 中 各 市 上 扣 之 间 关 系 信息 。 


其 他 一 些 属性 (比如 nodeType 和 nodeName 属性 ) 包含 元 素 本 身 的 

信息 。 比 如 说 ， 对 某 个 元 素 的 nodeName 属性 进行 的 查询 将 返回 一 个 

诸如 “p” 之 类 的 字符 串 。 

除 此 之 外 ， 文 档 的 每 个 元 素 节 点 还 都 有 一 个 属性 style 。style 属性 
包含 着 元 素 的 样式 ， 查 询 这 个 属性 将 返回 一 个 对 象 而 不 是 一 个 简单 的 

字符 串 。 样 式 都 存放 在 这 个 style 对 象 的 属性 里 : 


element.style.property 


下 面 是 一 个 内 藤 样 式 的 <p> 元 取 的 例子 : 


<p id="example" style="color: grey; font-family: ' Arial' ,Sans - 
serif;"> 


An example of a paragraph 
</p> 


利用 style 属性 ， 你 可 以 得 到 这 个 <p> 标签 的 样式 。 


首先 ， 需 要 从 文档 里 把 这 个 元 素 找 出 来 。 我 已 经 给 这 个 <p> 标签 设置 
了 一 个 独一无二 的 id 值 example 。 只 需 把 这 个 id 值 传递 给 
a aA. 方法 ， 再 把 这 个 方法 的 返回 值 赋值 给 变量 para ， 
就 可 以 通过 para 变量 引用 这 个 p 元 素 了 : 


var para = document .getElementById("example"); 


在 拿 到 这 个 元 素 的 样式 之 前 ， 我 想 先 向 大 家 证 明 一 下 style 属性 确实 
是 一 个 对 象 。 这 可 以 利用 关键 字 typeof 来 验证 。 下 面 ， 我 们 来 对 比 一 
下 style 属性 与 nodeName 属性 的 typeof 结果 。 


和 然后 把 这 个 文件 
加 载 到 浏览 器 里 


<1DOCTYPE html> 

<html> 

<head> 
<meta charset="utf-8" /> 
<title>Example</title> 
<script> 

window.onload = function() { 
var para = document.getElementById("example"); 
alert(typeof para.nodeNanme); 
alert(typeof para.style); 


</script> 
</head> 
<body> 

<p id="example" style="color: grey; font-family: 'Arial',sans- 
serif;"> 

An example of a paragraph 

</p> 
</body> 
</html> 


第 一 条 alert 语句 将 返回 字符 串 “string”， 因 为 nodeName 属性 是 一 
字符 串 (如 图 9-4 所 示 ) 。 


AOQOA Example 


string 


图 9-4 


第 二 条 alert 语句 将 返回 字符 串 “object*"， 因 为 style 属性 是 一 个 对 象 
(如 图 9-5 所 示 ) 。 


图 9-5 


也 就 是 说 ， 不 仅 文 档 里 的 每 个 元 素 都 是 一 个 对 象 ， 每 个 元 素 都 有 一 个 
style 属性 ， 它 们 也 是 一 个 对 象 。 


9.2.1 ”获取 样式 


你 能 够 得 到 para 变量 所 代表 的 <p> 标签 的 样式 。 为 了 查 出 某 个 元 素 在 
浏览 器 里 的 显示 闫 色 ， 我 们 需要 使 用 style 对 象 的 color 属性 : 


element.style.color 


下 面 这 条 alert 语句 告诉 我 们 style 对 象 ( 这 个 对 象 是 para 元 素 的 
属性 ) 的 color 属性 : 


alert("The color is + para.style.color) 


I 


这 个 元 素 的 style 属性 的 color 属性 是 “grey” (如 图 9-6 所 示 ) 。 


6 € F =| O 
本 到 5 [x 3 The color is grey 和 © 
\n example of a para | 
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图 9-6 


刚才 的 代码 中 还 设置 了 <p> 元 素 的 另 一 个 CSS 属 性 font -familLy 。 这 
个 属性 的 获取 方式 与 color 属性 略 有 不 同 。 你 不 能 简单 地 查询 sty1e 
对 象 的 font -fami1y ， 因 为 “font* 和 “family” 之 间 的 连 字 符 与 
JavaScript 语 言 中 的 减法 操作 和 从 相同 ，JavaScript 会 把 它 解释 为 减 号 。 如 
案 像 下 面 这 样 去 访问 名 为 font- family 的 属性 ， 就 会 收 到 一 条 出 错 信 


element.style.font-family 


JavaScript 将 把 减 号 前 面 的 内 容 解释 为 “元 素 的 Style 属性 的 font 属 
性 ”， II 4 的 区 量 ， 把 整个 表达 
式 解 释 为 一 个 减法 运算 。 这 完全 违背 了 我 的 本 音 


诚 号 和 加 号 之 类 的 操作 符 是 保留 字符 ， 不 允许 用 在 函数 或 变量 
里 。 这 同时 意味 着 它们 也 不 能 用 在 方法 或 属性 的 名 字 里 ( 别 起 
去 和 属性 其 实 是 关联 在 某 个 对 象 上 的 函数 和 变量 ) 。 


当 你 需要 引用 一 个 中 间 带 减 号 的 CSS 属 性 时 ，DOM 要 求 你 用 驼峰 命名 
法 。CSS 属 性 font -family 变 为 DOM 属 性 fontFamily : 


element.style.fontFamily 


为 了 查看 para 元 素 的 style 属性 的 fontFamily 属性 ， 在 
example.html 文件 里 增加 一 条 alert 语句 : 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Example</title> 
<script> 
window.onload = function() { 
var para = document.getElementById("example"); 
alert("The font family is " + para.style.fontFamily); 


</script> 
</head> 
<body> 
<p id="example" style="color: grey; font-family: 'Arial',sans- 
serif;"> 
An example of a paragraph 
</p> 
</body> 
</html> 


在 浏览 器 里 重新 加 载 example .html 文件 将 能 看 到 如 图 9-7 所 示 的 结 
果 。 
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图 9-7 


DOM 属 性 fontFamily 的 值 与 CSS 属 性 font -family 的 值 是 一 样 
的 。 具 体 到 这 个 例子 ， 它 是 


'Arial',sans-serif 


不 管 Css 样式 属性 的 名 字 里 有 多 少 个 连 字 符 ，DOM 一 律 采用 怠 峰 命名 
法 来 表示 它们 。 i color 对 应 着 DOM 属 性 
backgroundColor ，CSS 属 性 font -weight 对 应 着 DOM 属 性 
fontweight ，DOM 属 性 marginTopwidth 对 应 着 CSS 属 性 
margin-top-width 。 


DOM 在 表示 样式 属性 时 采用 的 单位 并 不 总 是 与 它们 在 CSS 样 式 表 里 的 
设置 相同 。 


在 示例 的 <p> 元 素 里 ，CSS 属 性 color 的 设置 值 是 单词 “grey”， 用 
JavaScript 代 码 检索 出 来 的 DOM color 属性 的 值 也 是 “grey”。 现 在 ， 把 
这 个 color 属性 修改 为 十 六 进 制 值 #999999: 


<p id="example" style="color: #999999; font-family: 'Arial',sans- 


serif"> 


再 在 JavaScript 代 码 里 加 上 一 条 alert 语句 输出 DOM 里 的 colLor 属 
性 : 


alert("The color is " + para.style.color); 


在 某 些 浏览 器 里 ，color 属性 以 RGB 〈 红 ， 绿 ， 蓝 ) 格式 的 颜色 值 
(153,153,153) 返 回 ， 如 图 9-8 所 示 。 
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图 9-8 


还 好 ， 这 类 例外 情况 并 不 多 。 绝 大 部 分 样式 属性 的 返回 值 与 它们 的 设 
置 值 都 采用 同样 的 计量 单位 。 如 有 我 们 在 设置 CSS font -size 属性 时 
以 em 为 单位 ， 相 应 的 DOM fontSize 属性 也 将 以 em 为 单位 : 


<1DOCTYPE html> 
<htm]l lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Example</title> 
<script> 
window.onload = function() { 
var para = document.getElementById("example"); 
alert("The font size is " + para.style.fontSize); 


</script> 
</head> 
<body> 
<p id="example" style="color: grey; font-family: 'Arial',sans- 


serif; 

= font-size: 1lem;"> 

An example of a paragraph 
</p> 

</body> 

</html> 


如 图 9-9 所 示 ，DOM fontSize 属性 的 确 也 是 以 em 为 单位 的 。 


ce 


图 9-9 


如 果 CSS font-size 属性 的 值 是 lem，DOM fontSize 属性 的 返回 
值 就 将 是 lem。 如 果 CSS font-size 属性 的 值 是 12px,，DOM 
fontSize 属性 的 返回 值 就 将 是 12px。 


使 用 CSS 速 记 属性 ， 你 可 以 把 多 个 样式 组 合 在 一 起 写成 一 行 。 比 如 说 ， 
如 果 声 明了 font: 12px 'Arial', sans-serif, CSS font - 
size 属性 将 被 设置 为 12px ，CSS font -family 属性 将 被 设置 

为 'Arial'，sans-serif : 


<p id="example" style="color: grey; font: 12px 'Arial',sans- 


serif;"> 


DOM 能 够 解析 像 font 这 样 的 速记 属性 。 如 果 查 询 fontSize 属性 ， 
将 得 到 一 个 12px 的 值 : 


alert("The font size is " + para.style.fontSize); 


如 图 9-10 所 示 ，DOM fontSize 属性 的 确 也 是 以 px 为 单位 的 。 
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图 9-10 
内 同样 式 
通过 style 属性 获取 样式 有 很 大 的 局 限 性 。 


style 属性 只 能 返回 内 崩 样 式 。 换 句 话说 ， 只 有 把 CSS style 属性 插 
入 到 标记 里 ， 才 可 以 用 DOM style 属性 去 查询 那些 信息 .: 


<p id="example" style="color: grey; font: 12px 'Arial',sans- 


serif;"> 


这 可 不 是 使 用 样式 的 好 办 法 一 一 表现 信息 与 结构 混杂 在 一 起 了 。 更 好 
的 办 法 是 用 一 个 外 部 样式 表 去 设置 样式 : 


p#example { 
color: grey; 


font: 12px 'Arial', sans-serif,; 
} 


把 上 面 这 段 CSS 代 码 存 入 文件 styles.css。 然 后 ， 从 
example.html 文件 里 把 内 栎 在 HTML 代 码 里 的 样式 删 掉 ， 只 保留 以 
下 内 容 : 


<p id="example"> 
An example of a paragraph 


</p> 


在 example .html 文件 的 开头 部 分 加 上 一 个 1ink 元 素 并 让 它 指 癌 
styles.css 文件 : 


<link rel="stylesheet" media="screen" href="styles/styles.css" /> 


样式 还 像 以 前 那样 作用 到 了 HTML 内 容 上 ， 但 与 使 用 style 属性 不 
同 ， 来 自 外 部 文件 styles .css 的 样式 已 经 不 能 再 用 DOM style 属 
性 检索 出 来 了 。 


alert("The font size is " + para.style.fontSize); 


style 属性 不 能 用 来 检索 在 外 部 CSS 文 件 里 声明 的 样式 ， 如 图 9- 
11 所 示 。 
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图 9-11 


如 果 把 样式 添加 在 example .html 文件 <head> 部 分 的 <style> 标签 
里 ， 你 将 看 到 相同 的 结 


<style> 
p#example { 
color: grey; 
font: 12px 'Arial', sans-serif; 


} 
</style> 


DOM style 属性 提取 不 到 如 此 设置 的 样式 。 


在 外 部 样式 表 里 声明 的 样式 不 会 进入 style 对 象 ， 在 文档 的 <head> 
部 分 里 声明 的 样式 也 是 如 此 。 

style 对 象 只 包含 在 HTML 代 码 里 用 style 属性 声明 的 样式 。 但 这 几 
平 没 有 实用 价值 ， 因 为 样式 应 该 与 标记 分 离开 来 。 


现在 ， 你 或 许 会 认为 用 DOM 去 处 理 CSS 样 式 训 无 意义 ， 但 这 里 还 有 史 
一 种 情况 可 以 让 DOM style 对 象 能 够 正确 地 反射 出 我 们 设置 的 样式 。 
你 用 DOM 设 置 的 样式 ， 束 可 以 用 DOM 再 把 它们 检索 出 来 。 


9.2.2 设置 样式 


许多 DOM 属 性 是 只 读 的 一 一 我 们 只 能 用 它们 来 获取 信息 ， 但 不 能 用 它 
们 来 设置 或 更 新 信息 。 类 似 previousSibling 、nextSibling 、 
parentNode 、firstchild 和 lastchild 之 类 的 属性 ， 它 们 在 你 
oo 元 至 在 下 点 树 上 的 位 置信 息 时 可 以 带 上 大 全， 但 它们 不 能 用 


凡事 无 绝对 ，style 对 象 的 各 个 属性 惑 都 是 可 读 写 的 。 我 们 不 仅 可 以 
通过 某 个 元 素 的 style 属性 去 获取 样式 ， 还 可 以 通过 它 去 更 新 样式 。 
你 可 以 用 赋值 操作 来 更 新 样 式 : 


element .style.property = Value 


style 对 象 的 属性 值 永远 是 一 个 字符 串 。 在 examp1le .html 文件 里 写 
一 些 JavaScript 代 人 码 履 盖 那 些 内 般 在 标记 里 的 CSS 代 码 。 比 如 说 ， 把 
para 元 素 对 象 的 color 属性 设置 为 "'black" : 


<1DOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="utf-8" /> 
<title>Example</title> 
<script> 

window.onload = function() { 
var para = document.getElementById("example"); 
para.style.color = "black"; 


</script> 


<p id="example" style="color: grey; font-family: 'Arial',sans- 
serif;"> 
An example of a paragraph 
</p> 
</body> 
</html> 


color 属性 已 经 被 变 成 了 "black" ， 如 图 9-12 所 示 。 
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图 9-12 
style 对 象 的 属性 的 值 必须 放 在 引号 里 ， 单 引号 或 双 3 引 号 均 可 : 


para.style.color = 'black'; 


如 膝 扎 了 使 用 引号 ，JavaScript 会 把 等 号 右边 的 值 解释 为 一 个 变量 : 


para.style.color = black; 


如 果 前 面 并 未 定义 过 变量 black ， 则 上 面 这 行 代码 将 无 法 工作 。 


用 赋值 操作 符 你 可 以 设置 任何 一 种 样式 属性 ， 诸 如 font 之 类 的 速记 属 
性 也 不 例外 : 


para.style.font = "2em 'Times',serif"; 


上 面 这 条 语句 将 把 fontSize 属性 设置 为 2em， 把 fontFamily 属性 
设置 为 'Times'，serif ， 如 图 9-13 所 示 。 
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图 9-13 

通过 Javascript 代 码 设置 样式 并 不 难 ， 我 也 给 出 了 一 些 具体 例子 。 不 过 
或 许 应 该 先 问 问 自己 ， 为 什么 要 这 么 做 ? 

9.3” 何 时 该 用 DOM 肢 本 设置 样式 

你 已 经 看 到 ， 用 DOM 设 置 样式 是 多 和 容易， 但 你 能 做 什么 事 并 不 意味 
着 你 应 该 做 什么 事 。 在 绝 大 多 数 场合 ， 还 是 应 该 使 用 CSS 去 声明 样式 。 
就 像 你 不 应 该 利用 DOM 去 创建 重要 的 内 容 那 样 ， 你 也 不 应 该 利用 DOM 
为 文档 设置 重要 的 样式 。 


不 过 ， 在 使 用 CSS 不 方便 的 场合 ， 还 是 可 以 利用 DOM 对 文档 的 样式 做 
一 些小 的 增强 。 


9.3.1 ”根据 元 素 在 节点 树 里 的 位 置 来 设置 样式 


通过 CSS 声 明 样 式 的 具体 做 法 主要 有 三 种 。 第 一 种 是 为 标签 元 素 (比如 
p 元 素 ) 统一 地 声明 样式 ， 如 下 所 示 : 


{ 
font-size: 1em， 


第 二 种 是 为 有 特定 class 属性 的 所 有 元 素 统 一 声明 样式 ， 如 下 所 示 : 


.fineprint { 
font-size: .8em; 


第 三 种 是 为 有 独一无二 的 id 属性 的 元 素 单独 声明 样式 ， 如 下 所 示 : 


#intro { 
font-size: 1.2em; 
} 


也 可 以 为 有 类 似 属 性 的 多 个 元 素 声明 样式 ， 如 下 所 示 : 


input[type*="text"] { 
font-size:1.2em; 
} 


在 现代 浏 咒 絮 中 ， 甚 至 可 以 根据 元 素 的 位 置 声明 样式 .: 


p:first-of-type { 
font-size:2em; 


font-weight:bold; 


} 


CSS2 引 入 了 很 多 与 位 置 相关 的 选择 器 ， 例 如 :first-child 

和 :last-child ， 而 CSS3 则 定义 了 诸如 :nth-child() 和 :nth- 
of-type() 之 类 的 位 置 选择 器 。 尽 管 如 此 ， 在 文档 的 和 点 树 中 ， 为 特 
定位 置 的 某 个 元 素 应 用 样式 仍旧 不 是 件 容 易 的 事 。 例 如 ， 在 CSS3 中 ， 
你 可 以 使 用 hl ~ * 选 择 器 为 所 有 hi 元 素 的 下 一 个 同辈 元 素 声 明 样 式 。 
问题 是 ， 有 那么 多 的 浏 斋 器 根本 不 文 持 CSS3 的 这 些 可 爱 的 位 置 选择 
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现在 ，CSS 还 无 法 根据 元 素 之 间 的 相对 位 置 天 系 找 出 某 个 特定 的 元 素 ， 
但 这 对 DOM 来 说 却 不 是 什么 难题 。 我 们 可 以 利用 DOM 轻 而 易 举 地 找 出 
文档 中 的 所 有 hd 元 素 ， 袋 后 再 同样 轻而易举 地 找 出 紧 跟 在 每 个 h1 元 
素 后 面 的 那个 元 素 ， 并 把 样式 添加 给 它 。 


首先 ， 用 getElementsByTagName 方法 把 所 有 的 hd 元 素 找 出 来 : 


var headers = document .getElementsByTagName("h1"); 


然后 ， 通 历 这 个 市 点 集合 里 所 有 元 素 : 


for (var i=0; i<headers.length; i++) { 


文档 中 的 下 一 个 节点 可 以 用 nextSibling 属性 查找 出 来 : 


请 注意 ， 这 里 真正 需要 的 不 是 “下 一 个 节点 ”， 而 是 “下 一 个 元 素 节 点 ”。 
下 面 这 个 getNextElement 函数 可 以 让 我 们 轻松 完成 这 一 任务 : 


function getNextElement(node) { 
if(node.nodeType == 1) { 
return node; 


} 
if (node.nextSibling) { 
return getNextElement(node.nextSibling); 


return null; 


} 


把 当前 hi 元素 ( 即 headers[i] ) 的 nextSibling 节点 作为 参数 传 
递 给 getNextElLement 函数 ， 并 把 这 个 函数 调用 的 返回 值 赋 信 给 


elem 变量 : 


var elem = getNextElement(headers[i].nextSibling); 


现在 ， 束 可 以 按照 我 们 的 想法 去 设置 这 个 元 素 的 样式 了 : 


elem.style.fontweight = "bold"; 
elem.style.fontSize = "1.2em"; 


最 后 ， 把 以 上 代码 封装 到 函数 styleHeaderSiblings 中 ， 别 忘 了 安 
排 一 些 测 试 去 检查 浏览 器 能 否 理解 我 们 在 这 个 函数 里 用 到 的 DOM 方 


法 : 


function styleHeaderSiblings() { 
if (!document.getElementsByTagName) return false; 
var headers = document .getElementsByTagName("h1"); 
var elem; 
for (var i=0; i<headers.length; i++) { 
elem = getNextElement(headers[i].nextSibling); 
elem.style.fontweight = "bold"; 
elem.style.fontSize = "1.2em"; 
} 
} 


function getNextElement(node) { 
if(node.nodeType == 1) { 
return node; 


if (node.nextSibling) { 
return getNextElement(node.nextSibling); 


return null; 


} 


你 可 以 用 window,on1Load 事件 调用 这 个 函数 : 


window.onload = styleHeaderSiblings; 


但 更 好 的 做 法 是 用 addLoadEvent 画 数 ， 这 样 你 就 能 很 方便 地 把 更 多 
的 函数 绑 定 到 这 个 事件 : 


addLoadEvent(styleHeaderSiblings); 


下 面 是 addLoadEvent 函数 的 代码 清单 ， 你 可 以 把 它 保存 到 一 个 外 部 
叉 件 ; 


function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = func; 
} else { 
window.onload = function() { 
oldonload( ); 
func( ) ， 


为 了 看 到 styleHeaderSiblings 函数 的 使 用 效果 ， 写 一 个 HTML 文 
档 ， 并 在 里 面 添加 一 些 一 级 标题 ( 即 hi 元 素 ) : 


<!IDOCTYPE html> 


<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Man bites dog</title> 
</head> 
<body> 
<h1i>Hold the front page</h1> 
<p>This first paragraph leads you in.</p> 
<p>Now you get the nitty-gritty of the story.</p> 
<p>The most important information Is delivered first.</p> 


<h1i>Extra! EXxtral</h1> 
<p>Further developments are unfolding.</p> 
<p>You can read all about it here.</p> 
</body> 
</html> 


ee .html 文件 。 图 9-14 古 它 目 前 在 浏览 右 里 的 
半 子 。 
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图 9-14 


接 下 来 ， 创 建文 件 夹 scripts 来 存放 JavaScript 脚 本 文件 。 把 
addLoadEvent 函数 存 为 一 个 名 为 addLoadEvent .js 的 文件 ， 并 把 
它 放 到 这 个 文件 来， 把 styleHeaderSiblings 函数 存 为 一 个 名 为 
styleHeaderSiblings .js 的 文件 ， 也 把 它 放 到 此 文件 夹 。 


为 了 调用 这 两 个 JavaScript 脚 本 文件 ， 还 需要 在 story .html 文件 的 
</body> 标签 之 前 插入 一 些 <script> 标签 : 


<script src="scripts/addLoadEvent.]js"></script> 


<script src="scripts/styleHeaderSiblings.]js"></script> 


现在 ， 把 story .html 文件 加 载 到 Web 浏 宽 器 中 ， 你 就 可 以 看 到 DOM 
脚本 生成 的 样式 效果 了 。 动 态 设置 的 样式 将 作用 于 紧 跟 在 各 个 hi 元 素 
后 面 的 那个 元 素 (如 图 9-15 所 示 ) 。 
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图 9-15 


从 理论 上 讲 ， 这 类 样式 还 是 应 该 用 CSS 来 设置 ， 但 在 实践 中 ， 用 CSS 来 
设置 这 类 样式 的 难度 往往 会 很 大 。 具 体 到 这 个 例子 ， 其 实 只 需 给 紧 跟 
在 hi 元 素 后 面 的 每 个 元 素 添 加 一 个 class 属性 ， 就 可 以 用 CSS 来 获得 
同样 的 效果 。 但 如 果 文 档 的 内 容 需要 定期 编辑 和 刷新 ， 添 加 class 属 
性 的 工作 很 快 就 会 变 成 一 种 负担 。 不 仅 如 此 ， 如 果 文 档 的 内 容 需要 通 
过 一 个 CMS (内 容 管 理 系统 ) 来 处 理 ， 给 文档 内 容 的 个 别 部 分 添加 
class 属性 或 其 他 样式 的 做 法 甚至 是 不 允许 的 。 


9.3.2 ”根据 某 种 条 件 反复 设置 某 种 样式 


不 妨 假设 我 有 一 份 由 一 些 日 期 和 地 名 构成 的 清单 ， 比 如 一 份 乐队 演出 
日 程 表 或 一 份 旅行 日 程 表 。 我 们 不 必 关 心 它 到 底 是 什么 ， 只 要 其 中 的 
日 期 和 地 点 有 直接 对 应 的 关系 束 行 了 。 对 ， 束 是 表格 型 数据 ， 把 表格 
型 数据 转换 为 HTML 内 容 的 理想 标签 当然 是 <table> 。 


注意 ”在 用 CSS 安 排 你 的 内 容 时 ， 千 万 不 要 人 云 亦 云 地 认为 表格 
都 是 不 好 的 。 虽 然 利 用 表格 来 做 页 面 布局 不 是 好 主意 ， 但 利用 表 
格 来 显示 表格 数据 却 是 理 所 应 当 的 。 


下 面 是 为 这 个 表格 编写 的 标记 : 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Cities</title> 
</head> 
<body> 
<table> 
<caption>Itinerary</caption> 
<thead> 


<tr> 
<th>when</th> 
<th>where</th> 

</tr> 

</thead> 

<tbody> 


< 七 六 > 
<td>June 9th</td> 
<td>Portland, <abbr title="Oregon">OR</abbr></td> 
</tr> 
<tr> 
<td>June 10th</td> 
<td>Seattle, <abbr title="Washington">wA</abbr></td> 
</tr> 
<tr> 
<td>June 12th</td> 
<td>Sacramento, <abbr title="California">CA</abbr></td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 


把 这 些 代 码 保存 为 itinerary,html 文件 。 如 果 现 在 就 把 这 个 文件 加 
载 到 一 个 Web 浏 览 器 里 ， 你 将 看 到 一 个 包含 全 部 的 信息 但 采 滞 模糊 的 表 
格 ， 如 图 9-16 所 示 。 


Cities 


Itinerary 
When Where 


June 9th Portland. OR 


图 9-16 
编写 一 个 CSS 样 式 表 ， 让 其 中 的 数据 可 读 性 更 好 : 


body { 
font-family: "Helvetica","Arial",sans-serif; 
background-color: #fff; 
color: #000; 


} 
table { 
margin: auto; 
border: 1px solid #699; 


caption { 
margin: auto; 
padding: .2em; 
font-size: 1.2em; 
font-weight: bold; 


th { 
font -weight: normal; 
font -style: italic; 
text-align: left,; 
border: 1px dotted #699; 
background-color: #9cc; 
color: #000; 


} 

th,td { 
width: 10em， 
padding: .5em; 


把 这 个 CSS 样 式 表 保存 为 format .css 文件 并 将 其 放 入 文件 夹 styles 
里 。 在 ijtinerary.html 文档 的 <head> 部 分 增加 一 个 <Link> 标签 
来 引用 这 个 CSS 文 件 : 


<link rel="stylesheet" media="screen" href="styles/format.css" /> 


在 Web 浏 览 器 里 刷新 itinerary .html 文件 就 可 以 看 到 这 个 CSS 的 效 
果 ， 如 图 9-17 所 示 。 


Cities 


A 


ltinerary 
Where 
June 9th Ed OR 


June 10th 
June 12th 


图 9-17 


让 表格 里 的 行 更 可 读 的 利用 技巧 是 交警 改变 它们 的 育 景色 ， 从 而 形成 
斑马 线 效 果 ， 使 相 令 的 两 行 泾 消 分 明 。 9 
样式 的 办 法 可 实现 这 种 效果 。 如 果 议 贤 器 文 持 CSS 3， 那 束 很 简单 ， 
需要 如 下 两 行 样式 : 


tr:nth-child(odd) { background-color:#ffc; } 


trinth-child(even) { background-color:#fff; } 


如 果 :nth-child() 不 可 用 ， 妥 儿 到 同 笠 的 效 采 就 只 好 采用 妨 外 的 技 
术 。 具 体 到 itinerary .html 文档 这 个 例子 ， 只 需 为 表格 中 的 每 个 奇 
数 行 (或 每 个 偶数 行 ) 设置 一 个 class 属性 即 可 。 Th 让 
够 方便 ， 尤 其 是 对 大 表格 来 说 更 是 如 此 : 如 果 你 以 后 要 在 这 个 表格 的 
中 间 插 入 或 删除 一 行 ， 就 不 得 不 痛苦 地 手动 更 新 大 量 的 class 属性 。 


JavaScript 特 别 擅长 处 理 重复 性 任务 。 用 一 个 while 或 for 循环 就 可 以 
轻松 地 遍历 一 个 很 长 的 列表 。 


4 只 要 隔行 设置 样式 束 行 


(1) 把 文档 里 的 所 有 table 元 素 找 出 来 。 

(2) 对 每 个 table 元 素 ， 创 建 odd 变量 并 把 它 初 始 化 为 false 。 

(3) 遍历 这 个 表格 里 的 所 有 数据 行 。 

(4) 如 采 变 量 odd 的 值 是 true ,设置 样 式 并 把 odd 变量 修改 为 false 
(5) 如 果 变 量 odd 的 值 是 false ， 不 设置 样式 ， 但 把 odd 变量 修改 为 
true 。 

我 为 这 个 函数 命名 为 stripeTables 。 这 个 函数 不 需要 参数 ， 所 以 男 


数 名 后 面 的 圆 插 号 是 空 的 。 别 起 了 在 这 个 函数 的 开头 部 分 安排 一 些 测 
试 ， 检 查 浏 贤 占 是 否 文 持 画 数 中 用 到 的 那些 DOM 方 法 : 


function stripeTables() { 
if (!document.getElementsByTagName) return false; 
var tables = document.getElementsByTagName("table"); 
Var odd, rows; 
for (var i=0; i<tables.length; i++) { 
odd = false; 
rows = tables[i].getElementsByTagName("tr"); 
for (var j=0; j<rows.length; j++) { 
If (odd == true) { 
rows[j].style.backgroundColor = "#ffc"; 
odd = false; 
} else { 
odd = true; 


这 个 函数 应 该 在 页 面 加载 时 执行 。 用 addLoadEvent 函数 来 做 这 件 事 
再 1 : 


addLoadEvent(stripeTables); 


把 以 上 JavaScript 代 码 保存 为 文件 stripeTables .js ， 再 将 其 和 
addLoadEvent .js 文件 都 放 到 文件 夹 scripts 里 去 。 


在 itinerary.html 文档 的 </body> 标签 之 前 ， 增 加 两 个 
<script> 标签 来 调用 这 两 个 JavaScript 脚 本 文件 : 


<script src="scripts/addLoadEvent.js"></script> 


<script src="scripts/stripeTables.js"></script> 


把 itinerary .html 文件 加 载 到 一 个 Web 浏 哎 妖 里 ， 束 可 以 看 到 表格 
里 的 偶数 行 都 有 了 一 个 新 的 背景 颜色 ， 如 图 9-18 所 示 。 


Cities 


A 


ltinerary 
June 9th 
June 10th 


June 12th Sacramento, CA 


很 凑巧 ， 上 一 章 的 displayAbbreviations 函数 也 适用 于 这 个 文 
档 。 把 displayAbbreviations,js 文件 也 放 到 scripts 文件 夹 
里 ， 并 在 itinerary .html 文档 再 增加 一 个 <script> 标签 引用 它 。 
J 面 可 以 看 到 动态 生成 的 “ 缩 略 语 列表 *， 如 图 
9-19 有 所 不 。 
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Oregon 
Washington 


California 


图 9-19 


9.3.3 ”了 响应 事件 


只 要 有 可 能 ， 最 好 选用 CSS 为 文档 设置 样式 。 话 虽 这 样 说 ， 你 刚才 也 看 
到 一 些 CSS 不 能 处 理 或 是 难以 部 署 的 情况 。 在 这 类 CSS 力 不 从 心 的 场 
合 ，DOM 可 以 帮 上 大 忙 。 


何 时 应 该 使 用 CSS 来 设置 样式 ， 何 时 应 该 使 用 DOM 来 设置 样式 并 不 总 
。 如 有 果 问 题 涉 及 需要 根据 某 个 事件 来 改变 样式 ， 就 更 
难 做 出 决定 了 。 


CSS 提 供 的 :hover 等 伪 class 属性 允许 我 们 根据 HTML 元 素 的 状态 来 
改变 样式 。 DOM 也 可 以 通过 onmouseover 等 事件 对 HTML 元 素 的 状 
态 变化 做 出 响应 。 很 难 判断 何 时 应 该 使 用 :hover 属性 、 何 时 应 该 使 用 


onmouseover 事件 。 


最 简单 的 答案 是 选择 最 容易 实现 的 办 法 。 比 如 说 ， 如 采 只 是 想 让 链接 
在 鼠标 指针 念 停 在 其 上 时 改变 颜色 ， 就 应 该 选用 CSS: 


a:hover { 
color: #c60; 


} 


仿 类 :hover 已 经 得 到 了 绝 大 多 数 浏 览 右 的 支持 一 一 至 少 在 它 补 用 来 改 
变 链 接 的 样式 时 是 如 此 。 但 如 果 还 想 利用 这 个 伪 类 在 鼠标 指针 蕙 停 在 
其 他 元 素 上 时 改变 样式 ， 支 持 这 种 用 法 的 浏览 右 束 没有 那么 多 了 。 


仍 以 itinerary .html 文档 中 的 表格 为 例 。 如 果 想 让 某 行 在 鼠标 指针 
莫 停 其 上 时 其 文本 变 为 粗 体 ， 可 以 使 用 CSs: 


tr:hover { 


font-weight: bold; 


从 理论 上 讲 ， 姐 标 指 针 蕊 停 在 表格 的 哪 一 行 ， 哪 一 行 的 文本 就 应 该 加 
黑 加 粗 ， 但 在 实践 中 ， 这 种 效果 只 能 在 一 部 分 浏览 器 里 看 到 。 


在 这 样 的 场合 ，DOM 却 能 够 得 到 公平 对 待 。 绝 大 多 数 的 现代 浏览 器 ， 
虽然 对 CSS 伪 类 的 支持 很 不 完整 ， 但 对 DOM 却 都 有 着 民 好 的 支持 。 在 
浏览 器 们 对 CSS 的 支持 进一步 完善 之 前 ， 在 事件 发 生 时 用 DOM 改 变 
HTML 元 素 的 样式 更 切合 实际 。 


下 面 这 个 highlightRows 函数 将 在 鼠标 指针 巧 停 在 某 个 表格 行 的 上 
方 时 ， 把 该 行文 本 加 黑 加 粗 : 


function highlightRows() { 
if(!document .getElementsByTagName) return false; 
var rows = document.getElementsByTagName("tr"); 
for (Var i=0; i<rows.length; i++) { 
rows[i].onmouseover = function() { 
this.style.fontweight = "bold"; 


rows[i].onmouseout = function() { 
this.style.fontweight = "normal"; 


} 


} 
addLoadEvent (highlightRows); 


把 这 个 函数 存 入 文件 high1LightRows .js 并 把 它 放 入 scripts 文件 
夹 ， 然 后 在 itinerary.html 文档 的 </body> 标签 之 前 增加 一 个 如 
下 所 示 的 <script> 标签 : 


<script src="scripts/highlightRows.js"></script> 


在 Web 浏 览 器 里 刷新 itinerary .html 文档 。 现 在 ， 当 你 把 鼠标 指针 
eh ， 这 个 表格 行 里 的 文本 将 加 黑 加 粗 ， 如 图 9- 
20 有 不 。 
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图 9-20 


在 这 一 类 场合 ， 需 要 决定 是 采用 纯粹 的 CSS 来 解决 ， 还 是 利用 DOM 来 
设置 样式 。 你 需要 考虑 以 下 因素 : 


。 这 个 问题 最 简单 的 解决 方案 是 什么 ; 
。 哪 种 解决 方案 会 得 到 更 多 浏览 锅 的 文 持 。 


要 做 出 明智 的 抉择 ， 就 必须 对 CSS 和 DOM 技 术 都 有 足够 深入 的 了 解 。 
如 果 你 手 里 只 有 椰 头 ， 那 么 你 看 到 的 任何 东西 都 像 钉 子 。 如 有 果 你 只 喜 
欢 使 用 CSS， 你 十 有 八 九 会 选择 一 个 CSS 解 决 方案 ， 而 不 考虑 JavaScript 
解决 方案 的 效果 会 不 会 更 好 。 反 之 ， 如 果 你 只 懂得 写 DOM 脚 本 ， 你 往 
往 会 立刻 动手 编写 JavaScript 芳 数 ， 而 不 去 考虑 用 CSS 来 解决 问题 会 不 
会 更 向 明快 捷 。 


如 琳 想 改变 茶 个 元 素 的 呈现 效 来 ， 使 用 CSS; 如 琳 想 改变 茶 个 元 素 的 行 
为 ， 使 用 DOM; 如 琳 你 想 根 据 某 个 元 素 的 行为 去 改变 它 的 呈现 效 来 ， 
请 运用 你 的 智 总 ， 在 这 个 问题 上 没有 放 之 四 海 而 篆 准 的 答案 。 


9.4 className 属性 


在 本 章 前 面 的 例子 里 ， 我 们 一 直 在 使 用 DOM 直 接 设 置 或 修改 样式 。 这 
种 做 法 让 “行为 层 ” 干 “表示 层 ” 的 活 ， 并 不 是 理想 的 工作 方式 。 如 来 你 改 
变 了 主意 ， 想 换 换 那 些 由 DOM 脚 本 设置 的 样式 ， 就 不 得 不 埋头 于 
JavaScript 苏 数 中 去 寻找 和 修改 与 设置 样式 有 关 的 语句 。 如 末 可 以 在 样 
式 表 里 进行 那些 修改 ， 那 束 好 多 了 。 


这 里 有 一 种 简明 的 解决 方案 : 与 其 使 用 DOM 直 接 改 变 某 个 元 素 的 样 
式 ， 不 如 通过 JavaScript 代 码 去 更 新 这 个 元 素 的 cLlass 属性 。 


大 家 看 看 styleHeaderSiblings 函数 是 如 何 添加 样式 的 : 


function styleHeaderSiblings() { 
if (!document.getElementsByTagName) return false; 
var headers = document.getElementsByTagName("h1"); 
var elem; 
for (var i=0; i<headers.length; i++ 


) 
elem = getNextElement(headers[i].nextSibling); 
elem.style.fontweight = "bold"; 
elem.style.fontSize = "1.2em"; 
} 
} 


如 有 果 决 是 把 紧 跟 在 一 级 标题 之 后 的 那个 元 素 的 CSS 字 号 值 从 1.2em 改 为 
1.4em， 你 就 不 得 不 去 修改 styleHeaderSiblings() 函数 。 


如 采 你 引用 一 个 外 部 CSS 样 式 表 ， 并 且 其 中 有 一 条 针对 .intro 类 的 样 
式 声明 : 


.intro { 
font-weight: bold; 
font-size: 1.2em; 


现在 只 需 在 styleHeaderSiblings() 函数 里 把 紧 跟 在 一 级 标题 之 后 
的 那个 元 素 的 class 属性 设置 为 intro 就 可 以 达到 同样 的 目的 。 


可 以 用 setAttribute 方法 来 做 这 件 事 : 


elem.setAttribute("class","intro"); 


更 简单 的 办 法 是 更 新 className 属性 。className 属性 是 一 个 可 读 / 
可 写 的 属性 ， 凡 是 元 素 节 点 都 有 这 个 属性 。 


你 可 以 用 className 属性 得 到 一 个 元 素 的 clLlass 属性 : 


element.className 


用 className 属性 和 赋值 操作 符 设 置 一 个 元 素 的 cLlass 属性 : 


element.className = Value 


下 面 是 利用 className 属性 编写 出 来 的 styleHeaderSiblings 画 
数 ， 它 在 设置 样式 时 不 需要 直接 与 style 属性 打交道 : 


function styleHeaderSiblings() { 
if (!document.getElementsByTagName) return false; 
var headers = document .getElementsByTagName("h1"); 
var elem; 
for (var i=0; i<headers.length; i++) { 


elem = getNextElement(headers[i].nextSibling); 
elem.className = "intro"; 


现在 ， 不 论 你 什么 时 候 想 改变 紧 跟 在 一 级 标题 之 后 的 那个 元 素 的 样 
式 ， 只 需 在 CSS 里 修改 .intro 类 的 样式 声明 : 


,Intro { 
font-weight: bold; 
font-size: 1.4em; 


} 


这 个 技巧 只 有 一 个 不 足 : 通过 className 属性 设置 某 个 元 素 的 class 
属性 时 将 替换 (而 不 是 追加 ) 该 元 素 原 有 的 class 设置 : 


<h1>Man bites dog</hi1> 
<p class="disclaimer">This is not a true story</p> 


如 果 对 包含 以 上 标记 的 文档 使 用 styleHeaderSiblings 函数 ， 那 
个 “文本 段 ” 元 素 的 class 属性 将 从 disclaimer 被 替换 为 jntro ， 而 
这 里 实际 需要 的 是 “追加 ”效果 一 class 属性 应 该 变 成 dijsclaimer 
intro ， 也 就 是 discLaimer 和 intro 两 种 样式 的 爱 加 。 


你 可 以 利用 字符 串 拼 接 操 作 ， 把 新 的 class 设置 值 退 加 到 className 
属性 上 去 (请 注意 ，intro 的 第 一 个 字符 是 空格 ) ， 如 下 所 示 : 


elem.className += " intro"; 


不 过 ， 实 际 上 你 只 希望 在 原来 确实 有 一 个 class 的 情况 下 才 这 么 做 。 
如 果 原 来 没有 任何 class ， 直 接 对 className 属性 赋值 束 可 以 了 。 


在 需要 给 一 个 元 素 追 加 新 的 class 时 ， 你 可 以 按照 以 下 步骤 操作 : 
(1) 检查 className 属性 的 值 是 否 为 null ; 
(2) 如 条 是 ， 把 新 的 class 设置 值 直 接 赋 值 给 className 属性 ; 


(3) 如 果 不 是 ， 把 一 个 空格 和 新 的 class 设置 值 追 加 到 className 属 
性 上 去 。 


你 可 以 把 以 上 步骤 封装 为 一 个 函数 addCLass 。 这 个 函数 带 两 个 参 
数 : 第 一 个 是 需要 添加 新 class 的 元 素 (element ) ， 第 二 个 是 新 的 
class 设置 值 (value ) 


function addClass(element,value) { 
If (!element.className) { 
element.className = value; 
} else { 
newClassName = element.className; 


newClassName+= " "， 
newClassName+= value; 
element.className = newClassName; 


在 styleHeaderSiblings 函数 里 调用 addClass 函数 : 


function styleHeaderSiblings() { 
if (!document.getElementsByTagName) return false; 
var headers = document .getElementsByTagName("h1"); 
var elem; 
for (var i=0; i<headers.length; i++) { 
elem = getNextElement(headers[i].nextSibling); 
addClass(elem, "intro"); 


} 
} 


你 也 可 以 更 新 一 下 stripeTables 函数 。 这 个 函数 现在 是 通过 直接 改 
变 奇 数 表 格 行 的 背景 颜色 来 实现 斑马 线 效 果 的 : 


function stripeTables() { 
if (!document.getElementsByTagName) return false; 
var tables = document.getElementsByTagName("table"); 
Var odd, rows,; 
for (var i=0; i<tables.length; i++) { 
odd = false; 
rows = tables[i].getElementsByTagName("tr"); 


for (var j=0; j<rows.length; j++) { 
if (odd == true) { 
rows[j].style.backgroundColor = "#ffc"; 


odd = false; 
} else { 
odd = true; 
} 
} 
} 


先 在 format ,css 文件 里 增加 一 条 对 应 于 class="odd" 的 样式 声 
明 . 


.Odd { 
background-color: #ffc; 
} 


然后 修改 stripeTables 函数 ， 让 它 通 过 调用 addClass 函数 来 实现 
同样 的 效果 : 


function stripeTables() { 

if (!document.getElementsByTagName) return false; 
var tables = document.getElementsByTagName("table"); 
Var odd, rows,; 
for (var i=0; i<tables.length; i++) { 

odd = false; 

rows = tables[i].getElementsByTagName("tr"); 

for (var j=0; j<rows.length; j++) { 

if (odd == true) 


{ 
addClass(rows[j],"odd"); 
odd = false; 

} else { 
odd = true; 


最 终结 果 与 前 面 完全 相同 。 区 别 在 于 现在 是 通过 CSS 而 不 是 DOM 去 设 
置 样式 。JavaScript 函 数 现在 更 新 的 是 className 属性 ， 根 本 没 碰 


style 属性 。 这 确保 了 网 页 的 表示 层 和 行为 层 分 离 得 更 加 彻底 。 

对 函数 进行 抽象 

你 所 有 的 函数 都 工作 得 很 好 ， 完 全 可 以 让 它们 保持 现状 。 不 过 ， 只 需 
再 做 一 些小 小 的 改动 ， 它 们 职 会 变 得 更 加 通用 。 把 一 个 非常 具体 的 东 
西 改 进 为 一 个 较为 通用 的 东西 的 过 程 叫做 抽象 (abstraction) 。 


仔细 看 看 styleHeaderSiblings 函数 ， 就 会 发 现 它 仅 适用 于 hi 元 
素 ， 而 且 classNeme 属性 值 intro 也 是 便 编 码 在 函数 代码 里 的 : 


function styleHeaderSiblings() { 
if (!document.getElementsByTagName) return false; 
var headers = document .getElementsByTagName("h1"); 
var elem; 


for (var i=0; i<headers.length; i++) { 
elem = getNextElement(headers[i].nextSibling); 
addClass(elem, "intro"); 


把 这 些 具 体 的 值 转换 为 这 个 函数 的 参数 ， 就 可 以 让 它 成 为 一 个 更 通用 
的 函数 。 把 改进 后 的 新 函数 命名 为 styLeELementSib1ing 并 给 它 增 
加 两 个 参数 一 一 tag 和 theclass : 


function styleElementSiblings(tag,theclass) 


接 下 来 ， 把 函数 代码 中 的 字符 串 “h1” 全 部 百 换 为 参数 变量 tag ， 再 把 
字符 串 “intro" 全 部 替换 为 参数 变量 thecLass 。 为 了 增加 代码 的 可 读 
性 ， 你 也 可 顺便 把 原来 的 headers 变量 名 替换 成 elems 以 增加 可 读 
性 : 


function styleElementSiblings(tag,theclass) { 
if (!document.getElementsByTagName) return false; 
var elems = document.getElementsByTagName(tag); 
var elem; 
for (var i=0; i<elems.length; i++) { 


elem = getNextElement(elems[i].nextSibling); 
addClass(elem, theclass); 


现在 ， 如 采 把 字符 串 值 "hl1” 和 "intro" 作 为 参数 传递 给 这 个 新 函数 ， 束 可 
以 获得 原来 的 效 采 : 


addloadEvent (function(){ 
styleElementSiblings("h1","intro"); 


}); 


不 论 何 时 你 发 现 可 以 像 上 面 这样 对 某 个 函数 进行 抽象 ， 都 应 该 马上 去 
做 ， 这 总 是 一 个 好 主意 。 今 后 你 或 许 会 需要 对 另 一 种 元 素 或 另 一 个 
className 属性 值 进行 类 似 的 处 理 。 如 果真 是 那样 ， 那 就 是 写 一 个 
styleElementSiblings 通用 函数 的 最 好 时 机 。 


9.5 ”小结 


在 本 章 里 ， 你 看 到 了 DOM 完 整 全 新 的 一 面 。 此 前 介绍 的 DOM 方 法 和 属 
性 要 么 属于 DOM Core， 要 入 属于 HTML-DOM。 本章 介 绍 的 CSS-DOM 
技术 针对 的 是 如 何 得 到 ( 读 ) 和 设置 ( 写 ) style 对 象 的 各 种 属性 ， 
而 style 对 象 本 身 又 是 文档 中 的 每 个 元 素 节点 都 具备 的 属性 。 


style 属性 的 最 大 限制 是 它 不 文 持 获 取 外 部 CSS 设 置 的 样式 。 但 你 仍 
可 以 利用 style 属性 去 改变 各 种 HTML 元 素 的 呈现 效果 。 这 在 我 们 无 
法 或 是 难以 通过 外 部 CSS 去 设置 样式 的 场合 非常 有 用 。 只 要 有 可 能 ， 就 
人 属性 ， 而 不 是 去 直接 更 新 style 对 象 的 有 关 
Es O 


， 我 们 向 大 家 介绍 了 以 下 几 种 CSS-DOM 技 术 的 有 具体 应 用 示 
| 。 


。 根据 元 素 在 节点 树 里 的 位 置 设置 它们 的 样式 
(styleHeaderSiblings 函数 ) 。 


。 遍历 一 个 节点 集合 设置 有 关 元 素 的 样式 (stripeTables 画 
关 [) 。 
。 在 事件 发 生 时 设置 有 关 元 素 的 样式 (highlightRows 函数 ) 。 


这 几 种 应 用 都 属于 用 JavaScript 入 侵 CSS 领 地 的 情况 ， 而 我 们 这 么 做 的 
理由 不 外 乎 两 点 :; 其 一 是 CSS 无 法 让 我 们 找到 想 要 处 理 的 目标 元 素 ， 其 
二 是 用 CSS 寻 找 日 标 元 素 的 办 法 还 未 得 到 广泛 的 支持 。 或 许 ， 未 来 的 
CSS 技 术 能 够 让 我 们 远离 这 和 种“ 不务正业” 的 DOM 脚 本 编程 技术 。 


不 过 ， 有 一 种 应 用 大 概 是 CSS 永 远 也 无 法 与 DOM 竞 争 的 : JavaScript 脚 
本 能 定时 重复 执行 一 组 操作 。 通 过 不 断 改 变样 式 ， 我 们 就 能 实现 CSS 根 
本 不 可 能 实现 的 效果 。 


在 下 一 章 里 ， 你 会 看 到 一 个 这 样 的 例子 。 你 将 写 一 个 能 够 随 着 时 间 的 
0 a ° 简单 地 说 ， 你 将 用 JavaScript 实 现 动 
画 效 果 。 


第 10 草 用 JavaScript 实 现 动画 效 
采 


本 章 内 容 


。 动画 基础 知识 
。 用 动画 丰富 网 页 的 浏览 效果 


在 本 章 里 ， 你 将 看 到 CSS-DOM 技 术 最 语 于 动感 的 应 用 之 一 : 让 网 页 上 
的 元 素 动 起 来 。 


10.1 动画 基础 知识 


前 面 的 章节 介绍 了 如 何 利用 DOM 技 术 修 改 文档 的 样式 信息 。 用 
JavaScript 深 加 样式 信息 可 以 节约 你 的 时 间 和 精力 ， 但 总 的 来 说 ，CSS 
仍 是 完成 这 类 任务 的 最 佳 工具 。 


不 过 ， 有 一 个 应 用 领域 是 目前 的 CSS 尚 且 无 能 为 力 的 。 如 果 我 们 想 随 着 
时 间 的 变化 而 不 断 改 变 某 个 元 素 的 样式 ， 则 只 能 使 用 JavaScript。 
JavaScript 能 够 按照 预定 的 时 间 间 隅 重复 调用 一 个 函数 ， 而 这 意味 着 我 
们 可 以 随 看 时 间 的 推移 而 不 断 改 变 某 个 元 素 的 样式 。 


动画 古 样 式 随 时 间 变 化 的 完美 例子 之 一 。 简 单 地 说 ， 动 画 就 是 让 元 素 
的 位 置 随 着 时 间 而 不 断 地 发 生变 化 。 


10.1.1 位 置 
网 页 元 素 在 浏览 器 窗口 里 的 位 置 是 一 种 表示 性 的 信息 。 因 此 ， 位 置信 


轧 通 币 是 由 CSS 负 贡 设 置 的 。 下 面 这 些 CSS 代 码 对 某 个 元 素 在 网 页 上 的 
位 置 做 出 了 规定 : 


element { 
position: absolute; 


top: SOpx; 
left: 100px; 


这 将 把 element 元 素 探 放 到 距离 浏览 絮 窗 口 的 左边 界 100 像 素 ， 距 离 
J 口 的 上 边界 50 像 素 的 位 置 上 。 下 面 是 实现 同样 效果 的 DOM 代 


element.style.position = "absolute"; 
element.style.1left = "100px"; 


element.style.top = "50px",; 


position 属性 的 合法 值 有 static 、fixed 、relative 和 
absolute 四 种 。static 是 position 属性 的 默认 值 ， 意 思 是 有 关 
元 素 将 按照 它们 在 标记 里 出 现 的 先后 顺序 出 现在 浏览 器 窗口 里 。 
relative 的 含义 与 static 相似 ， 区 别 是 position 属性 等 于 
relative 的 元 素 还 可 以 (通过 应 用 float 属性 ) 从 文档 的 正常 显示 
顺序 里 脱离 出 来 。 


如 果 把 某 个 元 素 的 position 属性 设置 为 abbsolute ， 我 们 就 可 以 把 
它 摆 放 到 容纳 它 的 “容器 ”的 任何 位 置 。 这 个 容器 要 么 是 文档 本 身 ， 要 
么 是 一 个 有 着 fixed 或 absolute 属性 的 父 元 素 。 这 个 元 素 在 原始 标 
记 里 出 现 的 位 置 与 它 的 显示 位 置 无 关 ， 因 为 它 的 显示 位 置 由 top 、 
left 、right 和 bottom 等 属性 决定 。 你 可 以 使 用 像素 或 百分比 作为 
单位 设置 这 些 属性 的 值 。 


设置 一 个 元 素 的 top 属性 将 把 该 元 素 择 放 到 距 文 档 项 特定 距离 的 位 

置 ， 一 个 元 素 的 bottom 属性 将 把 该 元 素 摆 放 到 距 文档 底 边 界 特定 距离 
的 位 置 。 类 似 地 ，left 或 right 属性 可 用 来 分 别 把 该 元 素 捍 放 到 距 
文档 左边 界 或 右边 界 特定 距离 的 位 置 。 为 防止 它们 发 生 冲突 ， 最 好 只 
使 用 top 或 只 使 用 bottom 属性 left 或 right 属性 也 是 如 此 。 


把 文档 里 的 某 个 元 素 摊 放 到 一 个 特定 的 位 置 是 很 容易 的 事 。 不 妨 假 设 
有 一 个 这 样 的 元 素 : 


<p id="message">wWhee!</p> 


于 是 ， 你 可 以 用 一 个 JavaScript 范 数 来 设置 这 个 元 素 的 位 置 : 


function positionMessage() { 
if (!document.getElementById) return false; 
if (!document.getElementById("message")) return false; 
var elem = document.getElementById("message"); 


elem.style.position = "absolute"; 
elem.style.left = "50px"; 
elem.style.top = "100px"; 


在 页 面 加 载 时 调用 这 个 positionMessage 函数 ， 会 把 这 段 文本 摆 放 
口 的 左边 界 50 像 素 、 距 浏 贤 絮 窗口 的 顶 边界 100 像 素 的 位 


window.onload = positionMessage; 


不 过 ， 最 好 是 用 addLoadEvent 函数 来 完成 ， 如 下 所 示 : 


function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = func; 
} else { 
window.onload = function() { 


oldonload( ); 
func( ); 
} 
} 


addLoadEvent (positionMessage); 


图 10-1 是 按 position="absolute" 的 情况 来 摆 放 这 个 元 素 的 效果 。 


Animation 


图 10-1 


改变 某 个 元 素 的 位 置 也 很 简单 ， 只 要 执行 一 个 函数 去 改变 这 个 元 素 的 
style ,top 或 style,1left 等 属性 就 行 了 : 


function moveMessage() { 
if (!document.getElementById) return false; 
if (!document.getElementById("message")) return false; 


var elem = document.getElementById("message"); 
elem.style.1left = "200px"; 


编写 一 个 这 样 的 函数 并 不 难 ， 问 题 是 该 如 何 去 调 用 这 个 函数 呢 ? 如 果 
让 moveMessage 函数 在 页 面 加 载 时 运行 ， 这 个 元 素 的 位 置 将 立刻 发 生 
变化 一 一 由 positionMessage 函数 给 出 的 原始 位 置 会 被 立刻 履 盖 : 


addLoadEvent (positionMessage); 
addLoadEvent (moveMessage); 


如 图 10-2 所 示 ， 这 个 元 素 的 显示 位 置 立 刻 发 生 了 变化 。 


Animation 
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元 素 的 显示 位 置 立 刻 发 生变 化 并 不 是 我 们 想 要 的 动画 效果 。 要 获得 真 
正 的 动画 效果 ， 必 须 让 元 素 的 位 置 随 着 时 间 不 断 地 发 生变 化 。 


导致 元 素 的 显示 位 置 立刻 发 生变 化 的 根源 是 JavaScript 太 有 效率 了 : 画 
数 一 个 接 一 个 地 执行 ， 其 间 根 本 没有 我 们 所 能 察觉 的 间隔 。 为 了 实现 
动画 效 末 ， 我 们 必须 “创造 ?出 时 间 间 隔 来 ， 而 这 正 征 我 们 将 要 探讨 的 


问题 。 


10.1.2 时间 


JavaScript 函 数 setTimeout 能 够 让 某 个 函数 在 经 过 一 段 预定 的 时 间 之 
后 才 开 始 执行 。 这 个 函数 带 有 两 个 参数 : 第 一 个 参数 通常 是 一 个 字符 
串 ， 其 内 容 是 将 要 执行 的 那个 函数 的 名 字 ; 第 二 个 参数 是 一 个 数值 ， 

需要 经 过 多 长 时 间 后 才 开 始 执行 第 一 个 参数 所 


setTimeout("function",interval) 


在 绝 大 多 数 时 候 ， 把 这 个 函数 调用 赋值 给 一 个 变量 将 是 个 好 主意 : 


variable = setTimeout("function",interval) 


如 果 想 取消 某 个 正在 排队 等 等 执 行 的 函数 ， 就 必须 事先 像 上 面 这 样 把 
setTimeout 画 妆 的 返 丫 值 赋值 纷 一 个 变量 。 你 可 以 用 一 个 名 为 
clearTimeout 的 函数 来 取消 “等 待 执行 ?队列 里 的 某 个 函数 。 这 个 男 
数 需要 一 个 参数 -保存 着 某 个 setTimeout 汞 数 调用 返回 值 的 变 


里: 
clearTimeout(Vvariable) 


修改 positionMessage 函数 ， 让 它 在 5 秒 (或 者 说 5000 毫 秒 ) 之 后 才 
去 调用 moveMessage 函数 : 


function positionMessage() { 
if (!document.getElementById) return false; 
if (!document.getElementById("message")) return false; 
var elem = document .getElementById("message"); 
elem.style.position = "absolute"; 


elem.style.left = "50px"; 
elem.style.top = "100px"; 
movement = setTimeout("moveMessage()",5000); 


positionMessage 琅 数 仍 将 在 页 面 加 载 时 得 到 执行 : 


addLoadEvent (positionMessage); 


这 样 一 来 ， 那 条 消息 将 先 出 现在 它 的 原始 位 置 上 ， 然 后 在 5 秒 之 后 才 向 
右 “ 跳 路 ”150 像 素 。 


es 我 可 以 随时 使 用 下 面 这 条 语句 取消 这 一 “ 踏 
”行为 : 


clearTimeout (movement ); 


movement 变量 对 应 着 在 positionMessage 函数 里 定义 的 
setTimeout 调用 。 它 是 一 个 全 局 变量 ， 我 在 声明 它 时 未 使 用 关键 字 
Var 。 这 意味 着 那个 “跳跃 ”行为 可 以 在 positionMessage 函数 以 外 
的 地 方 被 取消 。 


10.1.3 ”时 间 递 增 量 

把 某 个 元 素 在 5 秒 钟 之 后 向 右 移动 150 像 素 的 显示 效果 称 为 动画 实在 有 
扣 儿 偶 强 。 真 正 的 动画 效果 是 一 个 渐变 的 过 程 ， 元 素 应 该 从 出 发 点 逐 
步 地 移动 到 目的 地 ， 而 不 是 从 出 发 点 一 下 了 跳跃 到 目的 地 。 


我 们 更 新 一 下 moveMessage 画 数 ， 让 元 素 的 移动 以 渐变 的 方式 发 生 。 
下 面 是 新 moveMessage 函数 的 逻辑 。 


(1) 获得 元 聚 的 当前 位 置 。 

(2) 如 来 元 素 已 经 到 达 它 的 目的 地 ， 则 退出 这 个 函数 。 

(3) 如 果 元 素 尚 未 到 达 它 的 目的 地 ， 则 把 它 向 目的 地 移 近 一 点 儿 。 
(4) 经 过 一 段 时 间 间 陋 之 后 从 步 又 1 开始 重复 上 述 步 又 。 

第 一 步 是 确定 元 聚 的 当前 位 置 。 这 一 点 可 以 通过 得 询 元 素 的 


style.top 和 style.1left 等 位 置 属性 做 到 。 我 们 把 style .left 
和 style.top 属性 的 值 分 别 赋 给 变量 xpos 和 ypos : 


var xpos 
var ypos 


elem.style.1left; 
elem.style.top; 


当 moveMessage 函数 在 positionMessage 函数 之 后 被 调用 时 ， 
xpos 变量 将 被 赋值 为 50px，ypos 变量 将 被 赋值 为 100px。 我 遇 到 了 一 
点 儿 小 麻烦 : 这 两 个 值 都 是 字符 串 ， 而 接 下 来 的 代码 需要 进行 许多 算 
术 比 较 操作 。 我 需要 的 是 数 ， 不 是 字符 串 。 


JavaScript 函 数 parseInt 可 以 把 字符 串 里 的 数值 信息 提取 出 来 。 如 果 
把 一 个 以 数字 开头 的 字符 串 传 递 给 这 个 画 数 ， 它 将 返回 一 个 数值 : 


parseInt(string) 


下 面 是 一 个 例子 : 


parseInt("39 steps"); 


这 个 函数 调用 将 返回 数值 “39” (不 包括 引号 ) 


parseInt 函数 的 返回 值 通常 是 整数 。 如 果 需 要 提取 的 是 带 小 数 点 的 
数值 (也 就 是 浮 点 数 ) ， 就 应 该 使 用 相应 的 parseFloat 函数 : 


parseFloat(string) 


我 们 在 moveMessage 函数 里 只 与 整数 打交道 ， 所 以 使 用 parseInt 
函数 : 


var xpos = parseIint(elem.style.1left); 
Var ypos = parseInt(elem.style.top); 


parseInt 函数 将 把 字符 串 *50px” 转 换 为 整数 50， 把 字符 串 “100px” 转 
换 为 整数 100。 现 在 ，xpos 和 ypos 变量 分 别 包 含 整数 50 和 100 。 


注意 ”只 有 使 用 了 DOM 脚 本 或 style 属性 为 元 素 分 配 了 位 置 后 ， 
这 里 的 par selnt 函数 才 起 作用 。 


在 moveMessage 国 数 里 ， 接 下 来 的 几 个 步骤 需要 用 到 大 量 的 比较 操作 
符 。 


第 一 次 测试 是 否 相 等 ， 我 们 需要 知道 变量 xpos 和 ypos 的 值 是 否 等 于 
目的 地 那里 的 “ 左 * 位 置 和 “上 ”位 置 。 如 果 是 ， 退 出 这 个 函数 。 相 等 操作 
符 由 两 个 等 号 构成 。 ( 记 住 ， 一 个 等 号 是 赋值 。) 


if (xpos == 200 && ypos == 100) { 


return true; 


如 果 message 元 素 还 没有 到 达 它 的 目的 地 ， 则 继续 执行 下 面 的 代码 。 
接 下 来 ， 根 据 message 元 素 的 当前 位 置 及 其 目的 地 的 关系 更 新 变量 


xpos 和 ypos 的 值 。 我 们 希望 把 它们 移动 到 一 个 距 目 的 坐标 更 近 的 地 
方 。 如 果 xpos 小 于 终点 的 left ， 给 它 加 1: 


if (xpos < 200) { 
XpOS++， 


| 


如 果 xpos 大 于 终点 的 left ， 给 它 减 1 : 


if (xpos > 200) { 


xpos--; 


根据 ypos 的 值 和 终点 top 的 关系 ， 对 变量 ypos 进行 类 似 的 更 新 : 


if (ypos < 100) { 
ypos+t+, 


If (ypos > 100) { 
yhposS--, 


现在 ， 你 知道 把 变量 xpos 和 ypos 由 字符 串 转 换 为 数 的 原因 了 : 我 要 
大 于 和 小 于 操作 符 进 行 数值 比较 ， 并 根据 比较 的 结果 更 新 它们 的 


接 下 来 ， 需 要 把 变量 xpos 和 ypos 的 值 应 用 到 message 元 素 的 style 
属性 。 我 们 需要 把 字符 串 “px ”追加 到 这 两 个 值 的 来 尾 ， 并 把 它们 赋 给 
left 和 top 属性 : 


elem.style.left = xpos + "px"; 


elem.style.top = ypos + "px"; 


最 后 ， 我 们 需要 在 一 个 短暂 的 停顿 之 后 重复 执行 这 个 函数 。 我 们 把 停 
顿时 间 设 置 为 百 分 之 一 秒 ， 也 束 是 10 晕 秘 : 


movement = setTimeout("moveMessage()",10); 


下 面 是 moveMessage 函数 的 代码 清单 : 


function moveMessage() { 
if (!document.getElementById) return false; 
if (!document.getElementById("message")) return false; 
var elem = document.getElementById("message"); 
var xpos parseInt(elem.style.1left); 
var ypos = parseInt(elem.style.top); 
if (xpos == 200 && ypos == 100) { 
return true; 
} 
if (xpos < 200) { 
Xxpost+t+; 


} 
if (xpos > 200) { 


xpos--; 

} 

if (ypos < 100) { 
yPOS++7 


} 
If (ypos > 100) { 
ypoS--, 
} 
elem.style.left = xpos + "px"; 
elem.style.top = ypos + "px"; 
movement = setTimeout("moveMessage()",10); 


这 个 函数 使 得 message 元 素 以 每 次 1 像素 的 方式 在 浏览 器 窗口 里 移 

动 。 一 旦 这 个 元 素 的 top 和 left 属性 同时 等 于 100px 和 200px， 这 个 画 
数 就 停止 执行 。 这 可 是 实 实在 在 的 动画 效果 一 一 虽然 它 没 有 什么 实际 
的 意义 。 稍 后 ， 我 们 将 利用 同样 的 原理 实现 一 个 有 实用 价值 的 例子 。 


10.1.4 抽象 
刚才 编写 的 moveMessage 函数 只 能 完成 一 项 非常 特定 的 任务 。 它 将 把 


一 个 特定 的 元 素 移动 到 一 个 特定 的 位 置 ， 两 次 移动 之 间 的 停顿 时 间 也 
征 一 段 固定 的 长 度 。 所 有 这 些 信息 都 是 硬 编码 在 函数 代码 里 的 : 


function moveMessage() { 
if (!document.getElementById) return false; 
If (!document .getElementById("message") 


) 


return false; 
var elem = document .getElementById("message") 


Var xpos = parseInt(elem.style.1left); 
var ypos = parseIint(elem.style.top); 
if (xpos == 200 

&& ypos == 100 


) { 


return true; 


If (xpos < 200 


Xxpos+t+; 
} 
if (xpos > 200 


) { 


xpbos--; 


if (ypos < 100 


ypost+t+, 
} 
if (ypos > 100 


) 【 
ypos--; 


elem.style.left = xpos + "px"; 
elem.style.top = ypos + "px"; 
movement = setTimeout("moveMessage()",10 


如 果 把 这 些 常 数 都 改 为 变量 ， 这 个 函数 的 灵活 性 和 适用 范围 就 会 大 大 
J 0 函数 进行 抽象 ， 你 可 以 让 它 变 得 更 加 通用 
便于 重用 ) 。 


01. 创建 moveElement 画 数 


把 新 函数 命名 为 noveElement 。 与 noveMessage 函数 不 同 ， 新 
瑟 数 的 参数 将 会 有 多 个 。 下 面 是 每 次 调用 这 个 新 函数 时 可 能 变化 
的 东西 。 

(1) 打算 移动 的 元 素 的 ID 。 

(2) 该 元 素 的 目的 地 的 “ 左 ” 位 置 。 

(3) 该 元 素 的 目的 地 的 “上 ”位 置 。 

(4) 两 次 移动 之 间 的 停顿 时 间 。 

这 些 参数 都 应 该 取 一 个 描述 性 的 名 字 : 

(1) elementID 

(2) final x 

(3) final _y 

(4) interval 


定义 moveElement 函数 的 第 一 步 是 声明 它 的 各 个 参数 : 


function moveElement(elementID,final x,final y,interval) { 


用 这 些 变 量 把 前 面 硬 编码 在 moveMessage 函数 里 的 有 关 常 数 全 部 
替换 掉 。 在 moveMessage 画 数 的 开头 是 以 下 几 条 语句 : 


if (!document .getE1LementById) return false; 
if (!document.getElementById("message")) return false; 


var elem = document.getElementById("message"); 


把 这 几 条 语句 里 的 getElementById("message") 全 部 替换 为 
getElementById (elementID): 


if (!document .getElLementById) return false; 


if (!document.getElementById(elementID)) return false; 
var elem = document getElementById(elementID ) ， 


elem 变量 现在 对 应 着 你 想 移动 的 任何 元 素 。 


接 下 来 的 两 行 语句 用 不 着 修改 。 它 们 负责 把 给 定 元 素 的 left 和 
top 属性 转换 为 数值 ， 并 把 转换 结果 分 别 赋值 给 妆 量 xpos 和 
ypos : 


parseInt(elem.style. left); 
parseInt(elem.style.top); 


接 下 来 ， 检 查 给 定 元 素 是 否 已 经 到 达 目 的 地 。 在 moveMessage 范 
数 里 ， 目 的 地 的 坐标 值 是 200 (Left 位 置 ) 和 100 (top 位 置 ) 。 


if (xpos == 200 && ypos == 100) { 
return true; 


在 moveElement 函数 里 ， 目 的 地 坐标 值 将 由 变量 final1_x 和 
final_y 提供 : 


if (xpos == final x && ypos == final y) { 


return true; 


再 往 后 是 对 变量 xpos 和 ypos 进行 刷新 的 几 条 语句 。 如 果 变 量 
xpos 的 值 小 于 目的 地 的 “ 左 * 位 置 ， 给 它 加 1 。 


原来 的 目的 地 的 left 位 置 古 便 编 码 在 函数 代码 里 的 常数 200: 


if (xpos < 200) { 


XpoSs++; 
} 


现在 的 目的 地 的 left 位 置 由 变量 final_x 提供 : 


if (xpos < final x) { 
Xxpos+t+; 


类 似 地 ， 如 果 xpos 大 于 目的 地 的 left 位 置 ，xpos 减 1: 


if (xpos > final x) { 
xpos--; 
} 


对 负责 更 新 变量 ypos 的 语句 做 同样 的 修改 。 如 有 果 ypos 小 于 
final_y ， 给 它 加 1; 如 果 它 大 于 final_y ， 给 它 减 1: 


If (ypos < final y) { 
yPOS++7 


if (ypos > final y) { 
yhpoS--, 


接 下 来 的 两 行 语句 不 用 修改 。 它 们 负责 把 字符 串 "px" 追加 到 变量 
xpos 和 ypos 的 末尾 ， 并 将 其 赋值 给 elem 元 素 的 left 和 top 样 
式 属性 : 


elem.style.left = xpos + "px"; 


elem.style.top = ypos + "px"; 


最 后 ， 在 经 过 一 段 适当 的 时 间 间 隔 之 后 再 次 调用 同一 个 函数 。 在 
moveMessage 函数 里 ， 这 个 环节 相当 简单 : 每 隔 10 野 秒 调用 一 次 


moveMessage 函数 : 


movement = setTimeout("moveMessage()",10); 


在 moveElement 函数 里 ， 事 情 变 得 有 一 点 儿 复 杂 。 因 为 在 下 一 次 
调用 moveElement 时 ， 我 们 还 需要 把 elementID 、final x 

、 final_y 和 interval 等 参数 传 给 它 。 这 将 形成 一 个 如 下 所 示 
的 字符 串 : 


"moveElement('"+elementID+"',"+final x+","+final y+","+interva 


LE) 


字符 捉 拼 接 操作 实在 不 少 ! 与 其 把 一 个 这 么 长 的 字符 串 直 接 插 入 
到 setTimeout 六 数 里 去 ， 不 如 先 把 这 个 字符 串 赋值 给 repeat 


var repeat = 
"moveElement('"+elementID+"',"+final x+","+final y+","+interva 


Et 


现在 ， 我 们 只 需 把 repeat 变量 插入 到 setTimeout 函数 里 作为 
它 的 第 一 个 参数 就 行 了 。 第 二 个 参数 是 再 次 调用 第 一 个 参数 所 指 
定 的 函数 之 前 需要 等 待 的 时 间 间 隔 。 这 个 间隔 在 moveMessage 画 
数 里 被 便 编 码 为 10 毫 秒 ， 它 现在 将 由 变量 interval 提供 : 


movement = setTimeout(repeat,interval); 


用 一 个 右 伦 括号 结束 这 个 函数 : 


下 面 是 moveElement 函数 的 代码 清单 ; 


function moveElement (elementID,final x,final y,interval) { 
if (!document.getElementById) return false; 
if (!document.getElementById(elementI1ID)) return false; 
var elem = document .getElementById(elementID); 
var xpos parseInt(elem.style. left); 
Var ypos = parseInt(elem.style.top); 
if (xpos == final x && ypos == final y) { 
return true; 
} 
if (xpos < final x) { 
Xxpost+t+; 


if (xpos > final x) { 
xpos--; 

} 

if (ypos < final y) { 
ypost+t+, 


} 
if (ypos > final y) { 
ypos--, 

} 

elem.style.left = Xpos + "px"; 

elem.style.top = ypos + "px"; 

var repeat = 
"moveElement('"+elementID+"',"+final x+","+final y+","+interva 
有 

movement = setTimeout(repeat,interval); 


把 moveElement 函数 保存 为 noveElement , js 文件 。 把 这 个 文 
件 放 入 scripts 文件 夹 ， 别 忘 了 把 addLoadEvent ,js 文件 也 放 
到 那里 。 


02. 使 用 moveElement 画 数 
现在 ， 我 们 来 测试 一 下 这 个 函数 。 


首先 重新 创建 前 面 的 示例 ， 创 建 一 个 名 为 message .html 的 文 
档 ， 让 它 包 含 一 个 id 属性 值 是 message 的 文本 段 ; 


<!IDOCTYPE html> 


<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Message</title> 
</head> 
<body> 
<p id="message">Whee!</p> 
</body> 
</html> 


要 想 看 到 动画 效果 ， 我 们 必须 先 设 定 它 的 初始 位 置 。 编 写 一 个 名 
为 positionMessage .js 的 JavaScript 文 件 。 在 
positionMessage 函数 的 末尾 ， 调 用 moveElement 函数 : 


function positionMessage() { 
if (!document.getElementById) return false; 
if (!document.getElementById("message")) return false; 
var elem = document .getElementById("message"); 
elem.style.position = "absolute"; 
elem.style.left = "50px"; 
elem.style.top = "100px"; 
moveElement ("message",200,100,10); 


addLoadEvent(positionMessage); 


上 面 这 段 代码 中 的 moveElement 函数 调用 语句 将 把 字符 串 

值 “message” 传 递 给 elementID 参数 ， 把 数值 200 传 递 给 fijnal_x 
参数 ， 把 数值 100 传 递 给 final_y 参数 ， 把 数值 10 传 递 给 
interval 参数 。 


scripts 文件 夹 现 在 包含 三 个 文件 : addLoadEvent.js 、 
positionMessage.js 和 moveElement .js。 我 们 需要 在 
message.html 文档 里 插入 一 些 <script> 标签 来 引用 这 几 个 脚 
本 文件 ， 如 下 所 示 : 


<!IDOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="utf-8" /> 
<title>Message</title> 


</head> 
<body> 
<p id="message">whee!</p> 
<script src="scripts/addLoadEvent.js"></script> 
<script src="scripts/positionMessage.]jJs"></script> 
<script src="scripts/moveElement.]js"></script> 
</body> 
</html> 


现在 ， 把 message.html 文档 加 载 到 一 个 Web 浏 哆 器 里 就 可 以 看 
到 我 们 所 实现 的 动画 效果 了 ， 如 图 10-3 所 示 ， 那 个 元 素 将 在 浏览 器 
窗口 里 横向 移动 。 


Message 


图 10-3 


至 此 ， 一 切 都 进行 得 很 顺利 。 moveELement 函数 与 
moveMessage 函数 的 效果 完全 一 样 。 不 过 ， 因 为 我 们 已 经 对 这 个 
函数 进行 过 抽象 处 理 ， 所 以 现在 可 以 把 任意 的 参数 传递 给 它 。 比 
如 说 ， 如 果 改 变 参数 final_x 和 final_y 的 值 ， 就 可 以 改变 动 
画 的 移动 方向 ， 如 果 改 变 参 数 interval 的 值 ， 就 可 以 改变 动画 
的 移动 速度 : 


function moveElement(elementID,final x,final y,interval) 


在 positionMessage .js 文件 里 修改 positionMessage 函数 
的 最 后 一 行 ， 让 这 三 个 值 发 生 点 儿 变 化 : 


function positionMessage() { 
if (!document.getElementById) return false; 
if (!document.getElementById("message")) return false; 
var elem = document .getElementById("message"); 
elem.style.position = "absolute"; 


elem.style.left = "50px"; 
elem.style.top = "100px"; 
moveElement ("message", 125,25,20); 


addLoadEvent(positionMessage); 


在 Web 浏 览 器 里 刷新 message.html 文件 ， 就 可 以 看 到 新 的 动画 
0 那个 元 素 现在 将 斜 问 移 动 ， 移 动 的 速度 也 变 慢 了 ， 如 图 
10-4 所 不。 


Message 


图 10-4 


还 可 以 改变 moveElement 琴 数 的 elementID 参数 值 : 


function moveElement (elementID,final x,final y,interval) 


在 message.html 文件 里 增加 一 个 新 元 素 ， 把 它 的 id 属性 设置 


为 message2 : 


<!IDOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Message</title> 
</head> 
<body> 
<p id="message">Whee!</p> 
<p id="message2">wWhoa!</p> 
<script src="scripts/addLoadEvent.js"></script> 
<script src="scripts/positionMessage.]jJs"></script> 
<script src="scripts/moveElement.js"></script> 
</body> 
</html> 


现在 ， 在 positionMessage.js 文件 里 增加 一 些 代码 。 先 为 
message2 元 素 设 定 一 个 初始 位 置 ， 然 后 增加 一 条 moveElement 
函数 调用 语句 把 message2 作为 它 的 第 一 个 参数 传递 : 


function positionMessage() { 
if (!document.getElementById) return false; 
if (!document.getElementById("message")) return false; 
var elem = document .getElementById("message"); 
elem.style.position = "absolute"; 
elem.style.left = "50px"; 
elem.style.top = "100px"; 
moveElement ("message",125, 25, 20); 


if (!document.getElementById("message2")) return false; 
var elem = document .getElementById("message2"); 
elem.style.position = "absolute"; 

elem.style.left = "50px"; 

elem.style.top = "50px"; 

moveElement ("message2",125,125, 20); 


addLoadEvent(positionMessage); 


在 web 浏览 器 里 刷新 message .html 文件 就 可 以 看 到 新 的 动画 效 
果 了 ， 如 图 10-5 所 示 。 两 个 元 素 将 沿 着 不 同 的 方向 同时 移动 。 
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图 10-5 


在 这 两 个 例子 里 ， 所 有 工作 都 是 moveElement 函数 完成 的 。 只 需 
简单 地 改变 一 下 传递 给 这 个 函数 的 参数 值 ， 你 就 可 以 随意 重用 
它 。 这 正 是 用 参数 变量 代替 硬 编码 常数 的 最 大 好 处。 


10.2 ”实用 的 动画 


有 了 moveElement 这 个 通用 的 函数 ， 你 就 可 以 用 它 沿 任意 方 同 移动 页 
面 元 素 。 从 程序 设计 的 角度 看 ， 这 会 给 人 留 下 相当 深刻 的 印象 ， 但 从 
实用 的 角度 看 ， 它 的 意义 似乎 并 不 大 。 


网 页 上 的 动画 元 素 不 仅 容 易 引 起 访问 者 的 反感 ， 还 容易 导致 各 种 各 样 
的 可 访问 性 问题 。W3C 在 它们 的 Web Content Accessibility Guidelines 
(Web 内 容 可 访问 性 指南 ) 7.2 节 里 给 出 了 这 样 的 建议 : “除非 浏览 器 允 
许 用 户 “ 冻 结 ” 移 动 厦 的 内 容 ， 否 则 就 应 该 避免 让 内 容 在 页 面 中 移动 。 
(优先 级 2) 。 如 果 页 面 上 有 移动 着 的 内 容 ， 就 应 该 用 脚本 或 插件 的 机 
制 允 许 用 户 冻 结 这 种 移动 或 动态 更 新 行为 ” 


这 里 的 关键 在 于 用 户 能 不 能 控制 。 解 决 了 这 个 问题 ， 根 据 用 户 行 为 移 
动 一 个 页 面 元 素 可 能 起 到 增强 网 页 的 效 末 。 让 我 们 看 一 个 能 够 起 到 增 
强 页 面 效 末 的 例子 。 


10.2.1 提出 问题 

我 们 有 一 个 包含 一 系列 链接 的 网 页 。 当 用 户 把 姐 标 指针 最 停 在 其 中 的 
某 个 链接 上 时 ， 我 们 想 用 一 种 先睹为快 的 方式 告诉 用 户 这 个 链接 将 把 
他 们 带 往 何方 。 我 们 可 以 展示 一 张 预 入 图片。 

这 个 网 页 的 基本 文档 是 list ,html 文件 ， 下 面 是 它 的 代码 清单 : 


<!IDOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="utf-8" /> 
<title>web Design</title> 


<h1i>web Design</h1> 
<p>These are the things you should know.</p> 
<ol id="linklist"> 
<1i> 
<a href="structure.html">Structure</a> 
</1i> 
<1i> 
<a href="presentation.html">Presentation</a> 
</1i> 
<1i> 
<a href="behavior.html">Behavior</a> 
</1i> 
</o1> 
</body> 
</html> 


这 个 网 页 里 的 每 个 链接 分 别 指向 一 个 介绍 相关 网 页 设计 技巧 的 页 面 。 
这 些 链接 内 文本 已 经 简单 介绍 了 目标 页 面 的 内 容 (如 图 10-6 所 示 ) 。 
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图 10-6 


事实 上 这 个 网 页 已 经 足够 完美 。 也 束 是 说 ， 为 它 增 加 一 种 视觉 提示 效 
灯会 让 这 个 网 页 更 有 吸引 力 。 


从 某 种 意义 上 讲 ， 这 个 案例 与 我 们 在 本 书 前 面 的 有 关 章 节 里 实现 的 图 
片 库 颇 为 相似 : 它们 都 包含 着 一 系列 链接 ， 我 想 对 它们 做 的 改进 都 是 
显示 一 张 图 片 。 但 我 们 这 一 次 要 在 onmouseover 事件 〈 请 注意 ， 不 是 
onclick 事件 ) 被 触发 时 显示 一 张 图 片 。 


我 们 将 沿用 图 片 库 案例 中 的 脚本 一 一 只 需 把 每 个 链接 上 的 事件 处 理 函 
数 从 onclick 改 为 onmouseover 。 它 能 工作 ， 但 图 片 显示 得 不 够 流 
畅 : 当 用 户 第 一 次 把 鼠标 指针 悬 停 在 某 个 链接 上 时 ， 新 图 片 将 被 加 载 
过 去 。 即 使 是 在 一 个 高 速 的 网 络 连接 上 ， 这 多 少 也 需要 花费 点 儿 时 
则 ， 而 我 们 希望 能 够 立刻 响应 。 


10.2.2 解决 问题 

如 果 为 每 个 链接 分 别 准备 一 张 预 唤 图 片 ， 在 切换 显示 这 些 图 片 时 总 会 
有 一 些 延 迟 。 除 此 之 外 ， 人 简单 地 切换 显示 这 些 图 片 也 不 是 我 们 期 望 的 
效果 。 我 们 想 要 的 是 一 种 更 快 更 好 的 东西 。 

下 面 是 我 们 要 做 的 事情 。 


。 为 所 有 的 预 碗 图 片 生 成 一 张 " 集 体 照 "形式 的 图 片 。 

。 隐藏 这 张 “集体 照 ?图 斤 的 绝 大 部 分 。 

。 当 用 户 把 鼠标 指针 芸 停 在 某 个 链接 的 上 方 时 ， 只 显示 这 张 “ 集 体 
照 ” 图 片 的 相应 部 分 。 


我 已 经 制作 出 了 一 张 这 样 的 “和 集体 照 * 图 片 ， 它 由 三 张 预 宽 图 片 和 一 张 
默认 图 片 构成 ， 如 图 10-7 所 示 。 
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这 个 图 片 的 文件 名 是 topics ,gif。 它 的 宽度 是 400 像 素 ， 高 度 是 100 
像素 。 


我 们 把 topics ,gif 图 片 插入 到 list ,html 文档 里 ， 并 把 这 个 图 片 
元 素 的 id 属性 设置 为 preview : 


<!IDOCTYPE html> 


<meta charset="utf-8" /> 
<title>web Design</title> 


<h1i>web Design</h1> 
<p>These are the things you should know.</p> 
<ol id="linklist"> 
<1i> 
<a href="structure.html">Structure</a> 
</1i> 
<1i> 
<a href="presentation.html">Presentation</a> 
</1i> 
<1i> 
<a href="behavior.html">Behavior</a> 
</1i> 


</0O1> 

<img src="images/topics.gif" alt="building blocks of web design" 
id="preview" /> 
</body> 
</html> 


图 10-8 是 带 着 那些 链接 和 那 张 “集体 照 ? 图 片 的 网 页 显示 效果 。 
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图 10-8 


现在 ， 整 张 “ 集 体 照 ?图 片 都 是 可 见 的 。 每 次 我 们 都 只 想 让 这 个 图 乒 的 
某 个 100x100 像 素 的 部 分 出 现 。 我 们 无 法 用 JavaScript 做 到 这 一 点 ， 但 可 
以 用 CSS 来 做 。 


10.2.3 CSS 


CSS 的 overflow 属性 用 来 处 理 一 个 元 素 的 尺寸 超出 其 容 絮 尺寸 的 情 
况 。 当 一 个 元 素 包 含 的 内 容 超 出 自身 的 大 小 时 ， 就 会 发 生 内 容 洲 出 ， 
这 种 情况 ， 你 可 以 对 内 容 进行 “裁剪 ”， 只 让 一 部 分 内 容 可 见 。 你 还 可 


以 通过 overflow 属 告诉 浏览 器 是 否 需 要 显示 滚动 条 ， 以 便 让 用 户 
能 够 看 到 内 容 的 其 余部 分 。 


overflow 属性 的 可 取 值 有 4 种 : visible 、hidden 、scroll 和 
auto ° 


。 Visible : 不 裁剪 淤 出 的 内 容 。 浏 贤 器 将 把 淤 出 的 内 容 呈 现在 其 
容器 元 素 的 显示 区 域 以 外 ， 全 部 内 容 都 可 见 。 

。hidden : 隐藏 洪 出 的 内 容 。 内 容 只 显示 在 其 容 需 元 素 的 显示 区 域 

里 ， 这 意味 着 只 有 一 部 分 内 容 可 见 。 

scroll : 类 似 于 hidden ， 浏 览 絮 将 对 汐 出 的 内 容 进 行 隐藏 ， 但 

显示 一 个 滚动 条 以 便 让 用 户 能 够 滚动 看 到 内 容 的 其 他 部 分 。 

auto : 类 似 于 scroll ， 但 浏览 絮 只 在 确实 发 生 洲 出 时 才 显 示 演 

动 条 。 如 果 内 容 没有 深 出 ， 了 就 不 显示 滚动 条 。 


如 此 说 来 ， 在 overflow 属性 的 4 种 可 取 值 当中 ， 最 能 满足 我 们 要 求 的 
显然 是 hidden 。 我 们 有 一 张 实际 尺寸 是 400x100 像 素 的 图 片 ， 但 我 每 
次 只 想 显 示 这 张 图 片 中 一 个 尺寸 为 100 像 素 x100 像 素 的 部 分 。 


首先 ， 需 要 把 这 张 图 片 放 到 一 个 容器 元 素 。 我 们 把 它 放 入 一 个 div 元 
素 ， 并 把 这 个 div 元 素 的 id 属性 值 设置 为 slideshow : 


<div id="slideshow"> 
<img src="images/topics.gif" alt="building blocks of web design" 


id="preview" /> 
</div> 


创建 一 个 样式 表 文 件 layout .css ， 把 它 放 入 styles 文件 夹 。 


在 layout ,css 文件 里 ， 我 们 对 id="slideshow" 的 div 元 素 的 尺 
寸 做 了 如 下 设置 : 


#slideshow { 
width: 100px; 
height: 100px; 
position: relative,; 


把 position 设置 为 relative 很 重要 ， 因 为 我 们 想 让 子 图 厂 使 用 绝 
对 位 置 。 通 过 使 用 值 relative ， 子 元 素 的 (0, 0) 坐 标 将 固定 在 
slideshow div 的 左上 角 。 


把 CSS overflow 属性 设置 为 hidden ， 就 能 确保 其 中 的 内 容 会 被 裁 


#slideshow { 
width: 100px; 
height: 100px; 


position: relative,; 
overflow: hidden; 


接 下 来 ， 我 们 添加 一 个 <link> 标签 ， 把 layout .css 样式 表 引 入 
list .html 文档 : 


<!IDOCTYPE html> 


<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>web Design</title> 
<link rel="stylesheet" href="styles/layout.css" media="screen" /> 
</head> 
<body> 
<h1i>web Design</h1> 
<p>These are the things you should know.</p> 
<0] id="linklist"> 
<1i> 
<a href="structure.html">Structure</a> 
</1i> 
<1i> 
<a href="presentation.html">Presentation</a> 
</1i> 
<1i> 
<a href="behavior.html">Behavior</a> 
</1i> 
</o1> 
<div id="slideshow"> 
<img src="images/topics.gif" alt="building blocks of web 
design" id="preview" /> 
</div> 


</body> 
</html> 


现在 ， 把 list .html 文档 加 载 到 浏览 器 ， 就 可 以 看 到 变化 (图片 已 经 
被 裁剪 ) 。 我 们 只 能 看 到 topics .gif 图 片 的 一 部 分 一 一 它 的 第 一 个 
100 像 素 宽 的 部 分 ， 如 图 10-9 所 示 。 
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图 10-9 


接 下 来 要 解决 的 问题 是 ， 让 这 个 网 页 对 用 户 的 操作 行为 做 出 正确 的 响 
应 。 我 们 想 在 用 户 把 鼠标 指针 景 停 在 某 个 链接 上 时 ， 把 topics .gif 
图 片 中 与 之 对 应 的 那个 部 分 显示 出 来 。 这 是 一 种 行为 上 的 变化 : 用 
JavaScript 和 DOM 来 实现 再 合适 不 过 了 。 


10.2.4 _ JavaScript 


我 们 计划 用 moveElement 函数 来 移动 topics .gif 图 片 。 根 据 用 户 
正 把 鼠标 指针 莫 停 在 哪个 链接 上 ， 我 们 将 这 个 图 片 疝 左 或 向 右 移动 。 


我 们 需要 把 调用 moveElement 函数 的 行为 ， 与 链接 清单 里 每 个 链接 的 
onmouseover 事件 关联 起 来 。 


编写 一 个 prepareSlideshow 函数 来 完成 这 项 工作 ， 下 面 是 它 的 代码 
清单 : 


function prepareSlideshow() { 

// 确保 浏览 器 支持 DOM 方法 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 

// 确保 元 素 存 在 
if (!document.getElementById("linklist")) return false; 
if (!document.getElementById("preview")) return false; 

// 为 图 片 应 用 样式 
var preview = document.getElementById("preview"); 
站 = "abSsolute'"， 
preview.Sstyle.left = "0px'"; 
preview.style.top = "Opx"; 

// 取得 列表 中 的 所 有 链接 
var list = document.getElementById("]linklist"); 
var links = list.getElementsByTagName("a"); 

// 为 mouseover 事件 添加 动画 效果 
links[0].onmouseover = function() { 

moveElement("preview", -100,0,10); 


links[1].onmouseover = function() { 
moveElement("preview", -200,0,10); 


links[2] .onmouseover = function() { 
moveElement("preview", -300,0,10); 

} 
} 


首先 ，prepareSlideshow 函数 检查 浏 蜗 器 是 否 支持 它 用 到 的 DOM 
方法 : 


if (!document.getElementsByTagName) return false; 


if (!document.getElementById) return false; 


接着 ， 检 查 1inklist 和 preview 元 素 是 否 存 在 。 别 忘 了 ，preview 
是 topics .gif 图 片 的 id 属性 值 : 


if (!document.getElementById("linklist")) return false; 


if (!document.getElementById("preview")) return false; 


此 后 ， 为 preview 图 片 设 定 一 个 默认 位 置 。 我 将 把 它 的 style .left 
属性 设置 为 0px ， 把 它 的 style, top 属性 也 设置 为 0px : 


var preview = document.getElementById("preview"); 
preview,.style.position = "absolute"; 


preview.style.left = "QOpx"; 
preview.style.top = "Opx"; 


请 注意 ， 这 并 不 意味 着 topics ,gif 图片 将 出 现在 浏览 器 窗口 的 左上 
角 。 它 将 出 现在 它 的 容器 元 素 ， 也 就 是 那个 id 属性 值 是 slideshow 
的 div 元 素 的 左上 角 。 因 为 那个 div 元 素 的 CSS position 属性 值 是 
relative : 如 果 把 position 属性 值 是 absolute 的 元 素 A 放 入 一 个 
position 属性 值 是 relative 的 元 素 B，B 束 成 为 A 的 容器 元 素 ， 而 A 
将 在 B 的 显示 区 域 里 按 absolute 方式 进行 摆 放 。 因 此 ，preview 图 
片 将 出 现在 slideshow 元 素 的 左上 和 角 一 一 与 这 个 div 元 素 的 左边 界 和 
上 边界 之 间 的 距离 都 是 0px。 


最 后 ， 把 onmouseover 行为 与 链接 清单 里 的 各 个 链接 关联 起 来 。 首 
先 ， 把 一 个 由 包容 在 link1lList 元 素 里 的 所 有 a 元 素 构 成 的 节点 集合 
赋值 给 变量 LIinks 。 第 一 个 链接 对 应 着 Links[0] ， 第 二 个 链接 对 应 
着 Links[1] ， 第 三 个 链接 对 应 着 Links[2] : 


var list = document.getElementById("linklist"); 


var links = list.getElementsByTagName("a"); 


当 用 户 把 鼠标 指针 划 停 在 第 一 个 链接 上 时 ，moveElement 琴 数 将 被 调 
用 执行 。 此 时 ， 它 的 elementID 参数 的 值 是 preview ，final x 参 
数 的 值 是 -100，final_y 参数 的 值 是 9，interval 参数 的 值 是 10 宣 
秒 : 


links[0] .onmouseover = function( ) { 
moveElement ("preview", -100,0,10); 


第 二 个 链接 应 该 有 同样 的 行为 
了 -200: 


links[1].onmouseover = function() { 
moveElement ("preview", -200,0,10); 


第 三 个 链接 将 把 preview 图 片 向 左 移动 300 像 素 : 


links[2] .onmouseover = function() { 
moveElement ("preview", -300,0,10); 


接 下 来 ， 用 addLoadEvent 函数 调用 prepareSlideshow 画 数 ， 这 
0 
个 链接 上 : 


addLoadEvent (prepareSlideshow); 


把 prepareSlideshow 函数 保存 为 prepareSlideshow.js 文件 并 
将 其 放 到 scripts 文件 夹 里 。 把 moveElement .js 和 
addLoadEvent .js 文件 也 放 到 同一 个 文件 夹 中 。 


为 了 从 List.html 文档 里 调用 这 三 个 脚本 ， 还 需要 在 这 个 文档 的 
</body> 标签 之 前 添加 一 些 <script> 标签 : 


<1DOCTYPE html> 
<html lang="en"> 
<head> 


<meta charset="utf-8" /> 
<title>web Design</title> 
<link rel="stylesheet" href="styles/layout.css" media="screen" /> 
</head> 
<body> 
<h1>wWeb Design</h1> 
<p>These are the things you should know.</p> 
<ol id="linklist"> 
<1i> 
<a href="structure.html">Structure</a> 
</1i> 
<1i> 
<a href="presentation.html">Presentation</a> 
</1i> 
<1i> 
<a href="behavior.html">Behavior</a> 
</1i> 
</o1> 
<div id="slideshow"> 
<img src="images/topics.gif" alt="building blocks of web 
design" id="preview" /> 
</div> 
<script src="scripts/addLoadEvent.js"></script> 
<script src="scripts/moveElement.]js"></script> 
<script src="scripts/prepareSlideshow.]js"></script> 
</body> 
</html> 


把 1ist .html 文档 加 载 到 一 个 Web 浏 览 右 。 把 岂 标 指针 匡 信 在 清单 里 


的 某 个 链接 上 就 可 以 看 到 动画 戏 末 ， 如 图 10-10 所 示 。 
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图 10-10 

根据 鼠标 指针 正 悬 停 在 哪个 链接 上 ，topics.gif 图 片 的 不 同 部 分 将 
进入 我 们 的 视线 。 

不 过 ， 事 情 好 像 有 点 不 太 对 头 : 如 果 把 鼠标 指针 在 链接 之 间 快 速 地 来 
回 移动 ， 动 画 效 果 将 变 得 混乱 起 来 。moveE1Lement 函数 可 能 什么 地 方 
有 问题 。 


10.2.5 “变量 作用 域 问题 
动画 效果 不 正确 的 问题 是 由 一 个 全 局 变量 引起 的 。 在 把 moveMessage 


函数 抽象 化 为 noveElement 函数 的 过 程 中 ， 我 们 未 对 变量 movement 
做 任何 修改 : 


function moveElement(elementID,final x,final y,interval) { 
if (!document.getElementById) return false; 
if (!document.getElementById(elementID)) return false; 
var elem = document.getElementById(elementID); 
var xpos = parseIint(elem.style.1eft); 


var ypos = parseInt(elem,Sstyle.top); 
if (xpos == final x && ypos == final y) { 
return true; 


if (xpos < final x) { 
Xxpost+t+; 


if (xpos > final x) { 
xpos--; 


} 
If (ypos < final y) { 
ypost+t+, 


if (ypos > final y) { 
ypoS--, 


elem.style.left = xpos + "px"; 

elem.style.top = ypos + "px"; 

var repeat = 
"moveElement('"+elementID+"',"+final x+","+final y+","+interval+")" 


Ff 
movement = setTimeout(repeat,interval); 


留 下 了 一 个 隐患 : 每 当 用 户 把 鼠标 指针 悬 停 在 某 个 链接 上 ， 不 管 上 


一 次 调用 是 否 i 已 经 把 图 片 移动 到 位 ，moveElement 函数 都 会 被 再 次 调 
用 并 试图 把 这 个 图 片 移动 到 另 一 个 地 方 去 。 于 是 ， 当 用 户 在 链接 之 间 
快速 移动 鼠标 时 ，movement 变量 就 会 像 一 条 拔河 绳 那样 来 回 变 化 ， 
而 moveElement 函数 就 会 试图 把 图 片 同时 移动 到 两 个 不 同 的 地 方 去 。 


如 果 用 户 移 动 鼠 标的 速度 够 快 ， 积 累 在 setTimeout 队列 里 的 事件 就 
会 导致 动画 效果 产生 消 后 。 为 了 消除 动画 清 后 的 现象 ， 可 以 用 
clearTimeout 函数 清除 积累 在 setTimeout 队列 里 的 事件 : 


clearTimeout (movement ); 


可 是 ， 如 果 在 还 没有 设置 movement 变量 之 前 就 执行 这 条 语句 ， 我 们 
会 收获 一 个 错误 。 


我 不 能 使 用 局 部 变量 


var movement = setTimeout(repeat,interval); 


如 果 这 样 做 ，clearTimeout 函数 调用 语句 将 无 法 工作 ， 因 为 局 部 变 
量 movement 在 clearTimeout 函数 的 上 下 文 里 不 存在 。 

也 就 是 说 ， 既 不 能 使 用 全 局 变量 ， 也 不 能 使 用 局 部 变量 。 我 们 需要 一 
种 介 乎 它们 二 者 之 间 的 东西 ， 需 要 一 个 只 与 正在 被 移动 的 那个 元 素 有 


天 的 变量 。 


只 与 某 个 特定 元 素 有 天 的 变量 是 存在 的 。 事 实 上 ， 我 们 一 直 在 使 用 它 
们 。 那 束 是 “属性 ”。 


到 目前 为 止 ， 我 们 一 直 在 使 用 由 DOM 提 供 的 属性 ， 如 
element ,firstCchild 、element.style ， 等 等 。JavaScript 人 允许 


我 们 为 元 素 创建 属性 : 


element .property = Value 


只 要 愿意 ， 完 全 可 以 创建 一 个 名 为 foo 的 属性 并 把 它 设置 为 "bar" : 


elLement ,foo = "bar"; 


这 很 像 是 在 创建 一 个 变量 ， 但 区 别 是 这 个 变量 专属 于 某 个 特定 的 元 


力 、 


我 们 把 变量 movement 从 一 个 全 局 变量 改变 为 正在 被 移动 的 那个 元 素 
(elem 元 素 ) 的 属性 。 这 样 一 来 ， 就 可 以 测试 它 是 否 已 经 存在 ， 并 在 
它 已 经 存在 的 情况 下 使 用 clearTimeout 函数 了 : 


function moveElement(elementID,final x,final y,interval) { 
if (!document.getElementById) return false; 
if (!document.getElementById(elementID)) return false; 
var elem = document.getElementById(elementID); 
if (elem.movement) { 


clearTimeout(elem.movement); 


var xpos 
var ypos 


= parseInt(elem.style.1left); 

= parseInt(elem.style.top); 

if (xpos == final x && ypos == final y) { 
return true; 


if (xpos < final x) { 
xpos+t+; 


if (xpos > final x) { 
xpos--; 


} 
if (ypos < final y) { 
yPOS++7 


if (ypos > final y) { 
ypoS--, 


elem.style.left = xpos + "px"; 

elem.style.top = ypos + "px"; 

var repeat = 
"moveElement('"+elementID+"',"+final x+","+final y+","+interval+")" 


了 
elem.movement = setTimeout(repeat,interval); 


于 是 ， 不 管 moveElement 函数 正在 移动 的 是 哪个 元 素 ， 该 元 素 都 将 获 
得 一 个 名 为 movement 的 属性 。 如 果 该 元 素 在 moveElement 函数 开 


执行 时 已 经 有 了 一 个 movement 属性 ， 就 应 该 用 clearTimeout 函 
数 对 它 进行 复位 。 这 样 一 来 ， 即 使 因为 用 户 快 速 移动 鼠标 指针 而 使 得 
某 个 元 素 需 要 癌 不 同 的 方 回 移动 ， 实 际 执行 的 也 只 有 一 条 
setTimeout 函数 调用 语句 。 


请 重新 加 载 1Iist .html 文件 。 现 在 ， 在 链接 之 间 快 速 移动 鼠标 指针 不 
再 有 任何 问题 。setTimeout 队列 里 不 再 有 积 票 的 事件 ， 动 男 将 随 着 
鼠标 指针 在 链接 之 间 的 移动 而 立刻 改变 方向 。 接 下 来 ， 再 来 看 看 我 们 
还 可 以 对 动画 效果 做 哪些 改进 。 


10.2.6 ”改进 动画 效果 


在 元 素 到 达 由 final_x 和 final_y 参数 给 出 的 目的 地 之 前 ， 
moveElement 函数 每 次 只 把 它 移动 一 个 像素 (1px) 的 距离 。 移 动 效 
站 ， 但 移动 速度 未 免 有 些 慢 。 我 们 把 动画 的 移动 速度 加 快 一 点 


仔细 看 看 下 面 这 些 简 单 的 代码 ， 它 们 来 自 moveElement .js 文件 : 


if (xpos < final x) { 
xpos++; 


} 


变量 xpos 是 被 移动 元 素 的 当前 左 位 置 ， 变 量 final_x 是 这 个 元 素 的 
目的 地 的 左 位 置 。 上 面 这 段 代 码 的 含义 是 : “如 果 变 量 xpos 小 于 变量 

final_x ， 就 给 xpos 的 值 加 1。” 也 就 是 说 ， 不 管 那个 元 素 与 它 的 目 

的 地 距离 多 远 ， 它 每 次 只 前 进 一 个 像素 (1px) 。 为 了 增加 趣味 性 ， 我 
们 来 改变 它 。 


如 琳 那 个 元 素 与 它 的 目的 地 距离 较 远 ， 就 让 它 每 次 前 进 一 大 步 ， 如 末 
那个 元 素 与 它 的 目的 地 距离 较 近 ， 束 让 它 每 次 前 进 一 小 步 。 
首先 ， 我 们 需要 算出 元 素 与 它 的 目的 地 之 间 的 距离 。 如 果 xpos 小 于 


final x ， 我 们 要 知道 它们 差 多 少 。 只 要 用 final_x (日 的 地 的 左 
位 置 ) 减 去 Xpos (当前 左 位 置 ) 就 可 以 知道 答案 : 


dist = final x - xpos; 


元 素 还 需要 行进 的 距离 。 我 们 决定 让 元 素 每 次 前 进 这 个 


dist = (final x - Xpos)/10 
Xpos = xpos + dist; 


这 将 把 元 素 朝 它 的 目的 地 移动 十 分 之 一 的 距离 。 选 用 十 分 之 一 的 理由 
征 为 了 计算 方便 ， 如 有 果 你 原意， 选用 其 他 的 值 也 没 问 题 。 


如 果 xpos 与 final_x 相差 500 像 素 ， 变 量 dist 将 等 于 50。xpos 的 
值 将 增加 50。 如 果 xpos 与 final_x 相差 100 像 素 ，xpos 的 值 将 增加 
10。 


不 过 ， 当 xpos 与 final_x 之 间 的 差距 小 于 10 的 时 候 ， 问 题 来 了 : 用 
这 个 差距 除 以 10 的 结案 将 小 于 1， 而 我 们 不 可 能 把 一 个 元 素 移动 不 到 一 
个 像素 的 距离 。 


这 个 问题 可 以 用 Math 对 象 的 ceil 方法 来 解决 ， 它 可 以 返回 不 小 于 
dist 的 值 的 一 个 整数 。 下 面 是 ceil 方法 的 语法 : 


Math.ceil(number) 


这 将 把 浮 点 数 number 向 < 大 于 * 方 向 舍 入 为 与 之 最 接近 的 整数 。 还 有 一 
个 与 此 相对 的 floor 方法 ， 它 可 以 把 任意 浮 点 数 向 “小 于 * 方 向 舍 入 为 
与 之 最 接近 的 整数 。round 属性 将 把 任意 浮 点 数 合 入 为 与 之 最 接近 的 
整数 


Math.floor (number) 


Math.round(number) 


具体 到 moveElement 函数 ， 我 需要 问 “ 大 于 " 方 丫 进行 含 入 。 如 果 错 误 
地 选用 了 floor 或 round 方法 ， 这 个 元 素 将 永远 也 不 会 到 达 目 的 地 : 


Math.ceil((final x - xpos)/10); 
Xpos + dist; 


这 束 解 决 了 xpos 小 于 final_x 时 的 问题 : 


if (xpos < final x) 
dist = Math.ceil((final x - xpos)/10); 


Xpos = xpos + dist; 


} 


如 果 xpos 大 于 final_x ， 在 计算 距离 时 就 应 该 用 xpos 减 去 
final_x。 把 这 个 减法 结果 除 以 10， 向 “大 于 ” 舍 入 为 与 之 最 接近 的 整 
数 ， 然 后 赋值 给 变量 dist 。 此 时 ， 我 们 必须 用 xpos 减 去 dist 才能 
让 元 素 更 接近 它 的 目的 地 : 


if (xpos > final x) { 
dist = Math.ceil((xpos - final x)/10); 


Xpos = xpos - dist; 


3 


同样 的 逻辑 也 适用 于 变量 ypos 和 final_y : 


if (ypos < final y) { 
i Math.ceil((final y - ypos)/10); 
ypos + dist; 


> final y) { 
Math.ceil((ypos - final y)/10); 
ypos - dist; 


不 要 忘 了 在 xpos 和 ypos 之 后 声明 dist : 


Var xpos = parseInt(elem.style. left)， 
var ypos = parseInt(elem.style.top); 
var dist = 0; 


下 面 是 moveElement 函数 在 经 过 上 壕 改 进 后 的 代码 清单 : 


function moveElement(elementID,final x,final y,interval) { 
if (!document.getElementById) return false; 
if (!document.getElementById(elementID)) return false; 
var elem = document.getElementById(elementID); 
if (elem.movement) 区 
clearTimeout(elem.movement); 


parseInt(elem.style. left); 
parseInt(elem.style.top); 


var xpos 
var ypos 


var dist = 0; 
if (xpos == final x && ypos == final y) { 
return true; 


if (xpos < final x) { 
Math.ceil((final x - xpos)/10); 
Xpos + dist; 


if (xpos > final x) { 
dist = Math.ceil((xpos - final x)/10); 
xpos = xpos - dist; 


} 

if (ypos < final y) { 
Math.ceil((final y - ypos)/10); 
ypos + dist; 


If (ypos > final y) { 
Math.ceil((ypos - final _y)/10); 
ypos - dist; 


elem.style.left = xpos + "px"; 

elem.style.top = ypos + "px"; 

var repeat = 
"moveElement('"+elementID+"',"+final x+","+final y+","+interval+")" 


了 


} 


elem.movement = setTimeout(repeat,interval); 


把 这 些 修改 保存 到 moveElement .js 文件 。 重 新 加 载 1ist .html 就 
可 以 看 到 新 的 动画 效果 ， 如 图 10-11 所 示 。 
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图 10-11 


现在 ， 动 画 效 果 给 人 的 感觉 是 更 加 平 讲 和 迅速 。 当 你 第 一 次 把 鼠标 指 
针 巷 集 在 某 个 链接 上 时 ， 图 片 将 跳 路 一 大 段 距 离 。 随 着 图 片 越 来 越 接 
近 最 终 目 的 地 ， 它 会 “ 放 慢 ” 目 己 的 脚步 。 


在 (X)HTML、CSS 和 JavaScript 的 共同 努力 下 ， 预 期 的 动画 效 采 终于 实 
J 。 一 切 都 显得 那么 完美 ， 但 凡事 都 有 改进 的 余地 ， 这 一 次 也 不 例 
10.2.7 ”添加 安全 检查 

moveElement 琴 数 现在 的 表现 确实 非常 好 ， 但 还 有 一 件 事 让 我 不 放 
心 : 这 个 函数 的 开头 部 分 需要 一 个 假设 : 


parseInt(elem.style.1left); 


parseInt(elem.style.top); 


看 出 来 了 吗 ? 这 里 需要 假设 elem 元 素 肯 定 有 一 个 left 样式 属性 和 一 
个 top 样式 属性 。 我 其 实 应 该 先 检查 一 下 这 是 不 是 事实 。 


如 果 elem 元 素 的 left 和 /或 top 属性 未 被 设置 ， 我 有 以 下 几 种 选择 。 
首先 ， 可 以 简单 地 就 此 退出 这 个 函数 : 


if (!elem,.style.left || !elem,style.top) { 
return false; 


} 


如 果 JavaScript 没 有 读 到 这 些 属性 ， 整 个 函数 将 静 悄 悄 地 结束 运行 而 不 
是 报告 出 错 。 

男 一 种 选择 是 在 moveElement 峡 数 里 为 ]eft 和 top 属性 分 别 设置 一 
个 默认 值 ， 如 果 这 两 个 属性 没有 被 设置 ， 我 将 把 它们 的 默认 值 设置 为 

Opx: 


If (lelem.style.left) { 
elem.style.left = "Opx"; 


} 
if (!elem.style.top) { 
elem.style.top = "QOpx"; 


下 面 是 moveElement 函数 现在 的 代码 清单 : 


function moveElement(elementID,final x,final y,interval) { 
if (!document.getElementById) return false; 
if (!document.getElementById(elementID)) return false; 
var elem = document.getElementById(elementID); 
if (elem.movement) { 
clearTimeout (elem.movement ); 


} 
if (!elem.style.left) { 
elem.style.left = "QOpx"; 


} 
if (!elem.style.top) { 
elem.style.top = "QOpx"; 


var xpos = parseInt(elem.style.1left); 

var ypos = parseIint(elem.style.top); 

Var dist = 0; 

if (xpos == final x && ypos == final y) { 
return true; 


if (xpos < final x) { 
dist Math.ceil((final x - xpos)/10); 
Xpos Xpos + dist,; 

} 

if (xpos > final x) { 
dist Math.ceil((xpos - final x)/10); 
Xpos Xpos - dist; 


} 
if (ypos < final y) { 
dist = Math.ceil((final y - ypos)/10); 
ypos = ypos + dist,; 
} 
If (ypos > final y) { 
dist = Math.ceil((ypos - final y)/10); 
ypos = ypos - dist,; 


elem.style.left = xpos + "px"; 

elem.style.top = ypos + "px"; 

var repeat = 
"moveElement('"+elementID+"',"+final x+","+final y+","+interval+")" 


了 


elem.movement = setTimeout(repeat,interval); 


} 


有 了 刚才 所 说 的 安全 措施 之 后 ， 束 用 不 着 再 明确 地 设置 preview 元 素 
的 出 发 点 位 置 了 。 这 意味 着 可 以 把 prepareSlideshow 函数 里 的 这 两 
条 语句 删 挥 : 


preview.style.left = "QOpx"; 


preview.style.top = "Opx"; 


既然 提 到 了 prepareSlideshow 函数 ， 就 仔细 看 看 它 是 不 是 还 有 地 方 
需要 改进 。 


10.2.8 ”生成 HTML 标记 


list.html 文档 里 包含 一 些 只 是 为 了 能 够 用 JavaScript 代 码 实现 动画 歼 
果 而 存在 的 标记 : 


<div id="slideshow"> 
<img src="images/topics.gif" alt="building blocks of web design" 


id="preview" /> 
</div> 


如 采用 户 没有 局 用 JavaScript 文 持 ， 以 上 内 容 吏 未 免 太 多 余 了 。 这 里 的 
div 和 img 元 际 纯 粹 是 为 了 动画 效果 才 “ 塞 ”进来 的 。 既 然 如 此 ， 与 其 
把 这 些 元 素 便 编码 在 文档 里 ， 不 如 用 JavaScript 代 码 来 生成 它 们 。 我 们 
决定 在 prepareSlideshow ,js 文件 里 做 这 些 事情 。 


首先 ， 创 建 div 元 素 : 


var slideshow = document.createElement("div"); 
slideshow,.setAttribute("id","slideshow"); 


接着 ， 创 建 Img 元 素 : 


var preview = document.createElement("img"); 
preview.setAttribute("src","images/topics.gif"); 


preview.setAttribute("alt","building blocks of web design"); 
preview.setAttribute("id","preview"); 


把 新 创建 的 jmg 元 素 放 入 新 创建 的 div 元 素 : 


slideshow.appendCchild(preview); 


最 后 ， 我 们 想 让 这 些 新 创建 的 元 素 紧 跟着 出 现在 链接 清单 的 后 面 。 我 
们 将 使 用 来 自 本 书 第 7 章 的 ijnsertAfter 函数 来 完成 这 一 步 又 : 


var list = document.getElementById("linklist"); 


insertAfter(slideshow, list); 


下 面 是 最 终 完成 的 prepareSlideshow 函数 的 代码 清单 : 


function prepareSlideshow() { 
// 确保 浏览 器 理解 DOM 方法 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
// 确保 元 素 存 在 
if (!document.getElementById("linklist")) return false; 
var slideshow = document.createElement("div"); 
slideshow.setAttribute("id","slideshow"); 
var preview = document.createElement("img"); 
preview.setAttribute("src","images/topics.gif"); 
preview.setAttribute("alt","building blocks of web design"); 
preview.setAttribute("id","preview"); 
slideshow.appendchild(preview); 
var list = document.getElementById("linklist"); 
insertAfter (siideshow, list); 
// 取得 列表 中 的 所 有 链接 
var links = list.getElementsByTagName("a"); 
// 为 mouseover 事件 添加 动画 效果 
links[0].onmouseover = function() { 
moveElement("preview", -100,0,10); 
} 
links[1].onmouseover = function() { 
moveElement("preview", -200,0,10); 


links[2] .onmouseover = function() { 
moveElement("preview", -300,0,10); 


} 


} 
addLoadEvent (prepareSlideshow); 


接 下 来 ， 还 需要 对 1ist .html 文件 做 一 些 修改 :删除 
II 的 div 元 素 和 id="preview" i 有 
<script> 标签 来 调用 insertAfter .js 文件 。 下 面 是 最 终 完成 的 
list .html 文件 的 代码 清单 : 


<!IDOCTYPE html> 


<html lang="en"> 
<head> 
<meta charset="utf-8" /> 


<title>web Design</title> 
<link rel="stylesheet" href="styles/layout.css" media="screen" /> 
</head> 
<body> 
<hi>web Design</h1> 
<p>These are the things you should know.</p> 
<0] id="linklist"> 
<1i> 
<a href="structure.html">Structure</a> 
</1i> 
<1i> 
<a href="presentation.html">Presentation</a> 
</1i> 
<1i> 
<a href="behavior.html">Behavior</a> 
</1i> 
</o01> 
<script src="scripts/addLoadEvent.js"></script> 
<script src="scripts/insertAfter.]js"></script> 
<script src="scripts/moveElement.js"></script> 
<script src="scripts/prepareSlideshow.]js"></script> 
</body> 
</html> 


把 insertAfter 函数 写 入 insertAfter .js 文件 ， 并 把 它 放 入 
scripts 文件 夹 : 


function insertAfter(newElement, targetElement) { 
var parent = targetElement.parentNode; 
if (parent.lastcChild == targetElement) { 
parent.appendChild(newElement ); 
} else { 
parent.insertBefore(newElement, targetElement .nextSibling); 


} 
} 


还 需要 对 样式 表 文 件 layout ,css 做 一 些 修改 。 因 为 我 们 刚才 从 
prepareSlideshow.js 文件 里 删除 了 如 下 所 示 的 一 行 代码 : 


preview.style.position = "absolute"; 


所 以 现在 需要 把 以 下 样式 声明 添加 到 layout .css 样式 表 里 ， 这 才 是 
样式 信息 应 该 属于 的 地 方 : 


#slideshow { 
width: 100px; 
height: 100px; 
position: relative; 
overflow: hidden; 


} 


#preview { 


position: absolute,; 


} 


现在 ， 在 Web 浏 览 器 里 刷新 1ist .html 文档 。 从 表面 上 看 ， 功 能 还 是 
那些 功能 ， 行 为 还 是 那些 行为 。 但 经 过 上 壕 改进 之 后 ， 这 份 文档 的 结 
构 层 、 表 示 层 和 行为 层 已 经 分 离 得 更 加 彻底 了 。 如 果 在 禁用 了 
JavaScript 支 持 功能 的 情况 下 济 和 这 份 文 漠 ， 动 画图 片 将 根本 不 会 出 
CF Oo 


我 们 用 JavaScript 实 现 的 动画 功能 非常 完善 。 如 采 局 用 了 JavaScript， 这 
个 页 面 就 能 根据 用 户 的 操作 动作 通过 动画 效果 向 用 户 提 供 一 些 赏 心 局 
目的 视觉 反馈 : 如 果 没 有 启用 JavaScript， 动 画 功 能 将 按照 我 们 安排 的 
平稳 退化 保持 静默 ， 不 影响 用 户 的 浏 斋 体 验 。 


如 果 想 进一步 加 强 链接 清单 和 动画 图 片 的 视觉 联系 ， 可 以 通过 修改 
layout ,css 文件 去 实现 一 些 更 精彩 的 效果 。 比 如 说 ， 可 以 把 动画 图 
片 的 显示 位 置 从 链接 清单 的 下 方 挪 到 它 的 旁边 。 如 果 想 让 动画 部 分 更 
加 突出 的 话 ， 还 可 以 给 它 加 上 一 个 边框 。 


10.3 小结 


在 本 章 里 ， 我 们 首先 对 “动画 ”进行 了 定义 : 随时 间 变 化 而 改变 某 个 元 
素 在 浏览 器 窗口 里 的 显示 位 置 。 通 过 结合 使 用 CSS-DOM 和 JavaScript 的 
setTimeout 函数 ， 很 容易 实现 一 个 人 简单 的 动画 。 


从 技术 上 讲 ， 实 现 动画 效果 并 不 困难 ， 问 题 是 在 实践 中 应 不 应 该 使 用 
动画 。 动 画 技术 可 以 让 我 们 创建 出 很 多 种 非常 酷 的 效果 ， 但 那些 四 处 
移动 的 元 素 对 用 户 有 用 或 有 帮助 的 场合 却 并 不 多 。 不 过 ， 我 们 刚才 创 


建 的 JavaScript 动 画 却 是 一 个 例外 。 我 们 花 了 不 少 功夫 才 让 它 有 了 平滑 
的 动画 效果 和 平稳 退化 ， 最 终 的 结果 证 明 我 们 付出 的 努力 是 非常 值得 
的 。 我 们 现在 有 了 一 个 通用 性 的 函数 ， 它 可 以 在 确 有 必要 创建 动画 效 
果 时 帮 上 大 忙 。 


下 一 章 将 介绍 最 新 的 HTML5， 你 将 学 会 如 何 利 用 它 的 新 属性 。 


第 11 章 HTMIL5 


本 章 内 容 


。 什 么 是 HTML5 

。 今 天 怎么 使 用 HTML5 

。 对 HTML5 中 一 些 特性 的 简单 介绍 ， 包 括 Canvas、 视 频 、 音 频 
和 表单 


本 书 开始 时 介绍 了 JavaScript 的 历史 以 及 DOM 的 起 源 。 今 天 ，HTML5 的 
出 现 使 得 BOM、 样 式 和 行为 之 间 的 界限 变 得 模糊 了 。 因 此 ， 现 在 让 我 
们 来 看 看 HTML5 到 底 有 哪些 新 特性 ， 看 看 未 来 的 发 展 方向 在 哪里 。 


11.1 HTML5 简 介 


HTML5 是 HTML 语 言 当 前 及 未 来 的 新 标准 。HTML 规 范 从 HTML 4 到 
XHTML， 再 到 Web Apps 1.0， 最 后 又 回 到 HTML5， 整 个 成 长 历程 充满 
了 艰 邓 和 和 争议 。HTML5 问 世 背 后 的 明争暗斗 活 像 一 部 肥 蛙 剧 (这 部 戏 
中 的 一 些 情节 至 今 还 在 延续 ) ， 不 管 怎样 ， 结 局 还 是 圆满 的 。 我 们 有 
理由 为 HTML5 欢 呼 ， 因 为 多 种 技术 统一 的 趋势 日 益 明 朗 ， 它 标志 着 下 
一 代 Web 的 帷幕 正在 绥 绥 拉 开 。 


谈 到 Web 设 计 ， 最 准确 的 理解 是 把 网 页 看 成 三 个 层 : 
(1) 结构 层 
(2) 样式 层 


(3) 行为 层 

这 三 个 层 分 别 对 应 不 同 的 技术 ， 分 别 是 : 
(1) 超 文本 标记 语言 (HTML) 

(2) 层 佬 样式 表 (CSS) 

(3) JavaScript 和 文档 对 象 模型 (DOM) 


没 错 ， 你 可 以 说 还 能 再 加 一 层 ， 也 就 是 浏 贤 器 的 JavaScript API， 包 括 
cookie 和 window 等 1 。 


里 指 的 是 “浏览 器 对 象 模型 ” (BOM，Broswer Object Model) 。 一 -一 译 者 注 


这 


但 随 着 HTML5 的 到 来 ， 上 面 所 说 的 结构 层 、 样 式 层 和 行为 层 (以 及 浏 
览 右 中 的 JavaScript API) 已 经 被 整 装 到 一 个 小 集合 中 ， 不 过 也 仅仅 就 
征 一 个 集合 。HTML5 在 这 个 集合 中 提供 了 几 种 旗 芍 相当 的 技术 ， 让 我 
们 可 以 按 需 取 用 或 者 调用 。 


例如 ， 在 结构 层 中 ，HTML5 添 加 了 新 的 标记 元 素 ， 如 <section>、 
<article>、<header> 和 <footer>。 本 书 并 不 想 在 这 里 讨论 这 些 
新 的 标签 ， 想 知道 所 有 新 标记 的 读者 请 查看 规范 

(http:/www.w3.org/TRAhtml5/ ) 。HTML5 还 提供 了 更 多 交互 及 媒体 元 
素 ， 例 如 <canvas> 、<audio> 和 <Vvideo> 。 表 单 得 到 了 加 强 ， 新 
增 了 颜色 拾取 器 、 数 据 选择 器 、 清 动 条 和 进度 条 。 除 此 之 外 ， 你 会 发 
现 其 中 很 多 新 元 素 都 还 带 有 目 己 的 JavaScript 和 DOM API 。 


在 行为 层 ，HIML5 规 定 了 DOM 中 每 个 新 元 素 的 交互 方式 ， 以 及 新 的 
API。 例 如 ， 我 们 可 以 自 定 义 <video> 元 素 的 控件 ， 改 变 其 播放 方 
式 ，<form> 元 素 则 文 持 进度 控制 ， 而 在 <canvas> 元 素 中 ， 可 以 绘 
制 各 种 图 形 和 添加 图 片 及 其 他 对 象 。 


不 仅 是 标记 和 行为 ， 表 现 层 同 样 也 得 到 了 改进 。CSS 3 的 多 个 模块 赛 括 
了 高 级 选择 器 、 渐 变 、 变 换 ， 还 有 动画 。 这 些 模块 完全 可 以 奉 代 很 多 
过 去 需要 编写 脚本 才能 实现 的 效果 ， 比 如 动画 和 定位 元 素 ， 这 些 效果 
在 表现 层 中 的 位 置 举足轻重 。 虽 然 要 实现 高 级 动画 效果 仍然 免不了 要 


“| 多 脚本 ， 但 很 多 简单 的 交互 应 该 可 以 跟 计 时 器 或 JavaScript 说 拜 


O 


最 后 ， 痢 JavaScript API 还 包括 其 他 很 多 模块 ， 比 如 Geolocation 、 
Storage、Drag-and-Drop、Socket 以 及 多 线程 等 。 


不 管 打算 使 用 HTML5 的 什么 新 特性 ， 请 记 住 : 你 费 尽 心思 编写 的 
(X)JHIML 代 码 仍然 有 效 。 为 了 与 HIML5 兼 容 ， 你 要 做 的 只 有 一 小 点 改 
变 。 想 不 想 把 绝 大 多 数 文 档 都 “升级 ?到 HTML5? 好 ， 就 把 文档 类 型 声 
明 改 成 <!DOCTYPE html> 即 可 。 


假如 你 想 让 自己 的 页 面 验证 无 误 ， 当 然 还 要 把 一 些 废弃 的 元 素 碎 换 
掉 ， 如 把 <acronym> 替换 成 <abbr> 。 不 过 要 知道 ， 验 证 只 是 一 个 工 
上 有 具 ， 它 有 助 于 你 成 为 一 个 好 程序 员 ， 但 它 却 不 是 我 们 追求 的 理想 。 此 
外 ，<section> 或 <article> 等 新 元 素 在 一 些 老 浏览 器 中 也 许 不 会 
表现 得 很 好 ， 但 浏览 器 的 版 本 越 新 ， 它 们 的 表现 就 会 越 好 。 


第 8 章 我 们 已 经 说 过 了 ，HTML (包括 HTML5) 与 XHTML 相 比 ， 对 语 
法 的 要 求 要 宽松 得 多 。HTML5 的 目标 是 和 已 有 的 HTML 及 XHTML 文档 
全 部 兼容 ， 无 论 怎么 标记 文档 ， 无 论 遵循 什么 编码 规则 ， 都 由 你 说 了 
算 。 想 要 关闭 所 有 标签 并 且 做 到 标记 格式 良好 吗 ? 请 便 。 你 懒得 关闭 
所 有 标签 ， 嫌 那样 做 太 磋 烦 了 没 问 题 。 事 实 上 ， 就 连 下 面 这 个 “ 缺 
斤 短 两 ”的 HIML5 文 要 ， 也 可 以 完美 地 通过 验证 〈 但 愿 不 会 吓 着 你 ) : 


<1DOCTYPE html> 
<meta charset=utf-8 /> 


<title>This is a valid HTML5 document</title> 
<p>Try me at http://validator.w3.org/check</p> 


抛 开 验 证 成 功 与 否 不 谈 ， 如 果 你 想 让 自己 的 工作 显得 更 专业 ， 我 猜 你 
一 定 会 自己 加 上 <html>、<head> 和 <body> 无 论 浏 览 右 会 不 会 
为 你 添加 这 些 基本 的 结构 化 元 素 。 


那么 ，HTML5 离 我 们 还 有 多 远 ? 现在 我 们 就 可 以 使 用 这 些 令 人 激动 的 
新 符 性 了 吗 ? 答案 是 : 可以。 不 过 有 个 前 提 一 一 尽 可 能 提前 检查 浏览 

器 对 HTML5 的 支持 情况 。 然 而 ， 检 查 浏览 器 是 否 支 持 全 部 HTML5 特 性 
是 不 可 能 的 ， 我 们 说 过 ，HITML5 现 在 是 一 个 集合 ， 不 是 一 个 全 有 或 全 


无 的 概念 。 因 此 ， 可 以 利用 一 些 可 靠 的 特性 检测 ， 或 者 使 用 本 书 通 篇 
都 在 强调 的 渐进 增强 机 制 。 


11.2 “来自 朋友 的 忠告 


如 果 你 今天 就 想 用 HTML5， 那 太 好 了 ， 赴 紧 吧 ! 在 作出 决定 之 后 ， 我 
想 回 你 推荐 一 个 工具 : Modernizr? 。 


译 者 注 


2 读者 也 可 以 从 GitHub (https://github.com/Modernizr/Modernizr ) 下 载 Modernizr 。 


Modernizr (http://www.modernizr.com/ ) 是 一 个 开源 的 JavaScript 库 ， 利 
用 它 的 富 特 性 检测 功能 ， 可 以 对 HTML5 文 档 进 行 更 好 的 控制 。 
Modernizr 不 会 给 你 添加 浏 宽 絮 不 支持 的 特性 ， 比 如 ， 在 IE6 中 残 没 有 办 
法 使 用 本 地 存储 。Modernizr 能 做 的 是 为 你 提供 一 些 不 同 的 CSS 类 名 以 
及 特性 检测 (feature-detection) 属性 。 要 想 现在 使 用 HTML5， 
Modernizr 是 必 不 可 少 的 ， 它 的 用 途 也 不 止 于 此 。 


在 文档 中 崩 入 Modernizr 之 后 ， 它 会 随 着 页 面 加 载 变 一 些小 戏法 。 
首先 ， 它 会 修改 <htm1> 的 class 属性 ， 基 于 可 用 的 HTML5 特 性 添加 


额外 的 类 名 。 要 使 用 Modernizr 编 写 文 档 ， 通 常 都 要 给 <html> 元 素 添 
加 一 个 no=js 类 : 


<html] class="no-js"> 


利用 这 个 类 ， 可 以 在 浏览 器 不 支持 JavaScript 的 情况 下 应 用 CSS 样 式 。 


,no-js selector { 


style properties 


然后 ，Modernizr 会 检测 浏览 万 可 能 文 持 的 各 种 特性 ， 并 相应 地 添加 类 
和 名。 如 果 浏 览 器 支持 某 些 特性 ， 经 它 修 改 后 的 类 名 大 致 如 下 所 示 : 


<htm]l class="]js canvas canvastext geolocation crosswindowmessaging 
websqldatabase indexeddb 

hashchange historymanagement draganddrop websockets rgba hsila 
multiplebgs backgroundsize 

borderimage borderradius boxshadow opacity cssanimations csscolumns 


cssgradients 
cssreflections csstransforms csstransforms3d csstransitions video 


audio localstorage 
sessionstorage webworkers applicationcache svg smil svgclippaths 


fontface"> 


如 果 浏 览 器 不 支持 某 些 特性 ， 经 它 修 改 后 的 类 名 应 该 如 下 所 示 : 


<html class="js no-canvas no-canvastext no-geolocation no- 
crosswindowmessaging nowebsqldatabase 

no-indexeddb no-hashchange no-historymanagement no-draganddrop no- 
websockets 

no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no- 
borderradius no-boxshadow 

no-opacity no-cssanimations no-csscolumns no-cssgradients no- 
cssreflections no-csstransforms 

no-csstransforms3d no-csstransitions no-video no-audio no- 
localstorage no-sessionstorage nowebworkers 

no-applicationcache no-svg no-smil no-svgclippaths no-fontface"> 


当然 ， 实 际 情况 是 浏览 器 可 能 会 支持 部 分 特性 ， 而 不 支持 男 一 些 特 
性 。 这 时 候 ， 类 名 中 就 会 间或 出 现 feature 和 no-feature 。 


0 可 以 在 CS$ 中 定义 相应 的 增强 和 退化 版 本 ， 改 善 用 户 体 
人 小 人: 


.multiplebgs es pi{ 
/* 为 文 持 多 背景 浏览 


.No-multiplebgs article p { 
/* 为 不 支持 多 背景 的 浏览 器 编写 


} 


类 似 地 ，Modernizr 库 也 提供 了 JavaScript 特 性 检测 对 象 ， 可 以 在 DOM 脚 
本 中 直接 使 用 : 


if ( !Modernizr.inputtypes.date ) { 
/* 不 文 持 本 地 数据 ， 使 用 自 定义 的 数据 选择 脚本 */ 


createDatepicker(document.getElementById('birthday')); 


Modernizr 还 可 以 帮 一 些 老 旧 的 浏览 器 处 理 <section> 和 <article> 
这 样 的 新 元 素 。 "有 国 恋 者 可 能 还 个 知道 ， 上 其实 你 可 以 在 人 多 数 测 蜗 器 
中 创建 类 似 <foo> 这 样 的 元 然后 再 为 该 元 素 应 用 样式 只 要 你 
不 在 乎 验证 结果 就 无 所 谓 对 于 这 些 浏览 器 来 涪 新 的 HTML5 元 素 
(如 <section> ) 也 照样 可 以 拿 来 就 用 。 为 使 用 这 些 新 元 素 ， 你 要 做 
ee 以 便 浏 览 器 可 以 把 它们 当做 块 元 
素来 硅 现 : 


article, aside, footer, header, hgroup, nav, section { 
display: block; 


唯一 的 特例 丈 是 正 。 要 在 正中 添加 未 知 元 素 ， 必 须 移 使 用 类 似 下 面 的 
JavaScript 代 码 来 创建 该 元 素 : 


document.createElement('article'); 


Modernizr] 以 帮 我 们 来 做 这 件 事 ， 但 是 ， 这 并 不 意味 着 你 就 可 以 放心 
地 使 用 <video> 元 素 众 入 视频 了 。 和 何 我 们 深 加 底 忆 的 
JavaScript 及 DOM API， 或 者 与 这 些 元 素 相 关 的 其 他 特性 


使 用 Modernizr 非 党 简单 ， 从 http:Wwww.modernizrcomy 下 载 它 ， 将 在 文 
档 的 <head> 中 添加 该 脚本 : 


<script src="modernizr-1.5.min.js"></script> 


一 定 要 把 这 个 脚本 放 在 <head> 元 素 中 。 虽 然 这 与 第 5 章 建 议 的 不 一 
致 ， 但 这 样 做 有 特殊 的 原因 。 把 Modemnizr 放 在 文档 开头 ， 可 以 在 加 载 
其 他 标记 之 前 先 加 载 它 ， 以 便 它 在 文档 呈现 之 前 能 够 创建 好 新 的 
HTML5 元 素 。 要 是 把 它 放 到 了 文档 的 末尾 ， 那 么 等 不 到 Modernizr 发 挥 
作用 ， 浏 览 亏 吏 已 经 开始 硅 现 文档 并 应 用 样式 了 。 


11.3“” 几 个 示例 


为 了 让 读者 朋友 沦 演 鲜 ， 下 面 我 们 就 介绍 一 些 有 关 Canvas、 视 频 /音频 
以 及 表 香 的 例子 ， 看 一 看 HTML5 都 提供 了 什么 API。 要 想 试 答 以 下 的 
示例 ， 和 需要 下 列 浏览 器 。 


苹果 Safari 5+ 
谷歌 Chrome 6+ 
Mozilla Firefox 3.6+ 
Opera 10.6+ 

微软 IE 9+ 


11.3.1 Canvas 


每 个 浏览 器 都 可 以 显示 静态 图 片 。 通 过 GIF 可 以 实现 一 些 动画 ， 或 者 使 
用 CSS 加 JavaScript 也 能 变化 一 些 样式 ， 但 仅 此 而 已 。 要 想 与 静态 图 片 
交互 可 就 难 上 加 难 了 。HTML5 的 <canvas> 元 素 让 这 一 切 成 为 了 历 
史 ， 通 过 它 可 以 动态 创建 和 操作 图 形 图 像 。 


在 网 页 中 支 起 一 块 “ 画 布 ”(canvas) 很 简单 : 


<canvas id="draw-in-me" width="120" height="40"> 


<p>Powered By HTML5 canvas</p> 
</canvas> 


在 这 张 “ 画 布 ? 上 作画 嘛 ， 可 束 是 男 外 一 回 事 了 。 要 了 解 详细 的 绘画 方 
法 ， 请 参考 <canvas> 元 素 的 规范 (http://www.whatwg.org/specs/web- 
apps/current-work/multipage/the-canvas-element.html ) 。 不 过 从 本 质 上 
来 讲 ，<canvas> 涉及 的 数学 及 定位 的 概念 与 Adobe Ilustrator 等 基于 
矢量 的 图 形 软件 或 者 基于 矢量 的 编程 语言 没有 太 大 的 差别 。 


注意 ”如果 读者 使 用 过 Illustrator， 可 以 试 试 使 用 Ai->Canvas 插 件 

(http://visitmix.com/labs/ai2canvas/ ) ， 虽 然 作 为 “所 见 即 所 得 ”的 
编辑 器 ， 倪 不 了 会 在 输出 中 生成 一 些 见 余 的 东西 ， 但 通过 手工 编 
辑 还 是 能 得 到 最 佳 殖 果 的 。 


下 面 这 个 例子 利用 <canvas> 男 一 个 圆 角 小 黑金 于 ， 市 有 2 像素 宽 的 日 
色 插 边 效 采 。 


function draw() { 

var canvas = document.getElementById('draw-in-me'); 

if (canvas.getContext) { 
var ctx = canvas.getContext('2d'"'); 
ctx.beginPath( ); 
ctx.moveTo(120.0, 32.0); 
ctx.bezierCurveTo(120.0, 36.4, 116.4, 40.0, 112.0, 40.0); 
ctx.lineTo(8.0, 40.0); 
ctx.bezierCurveTo(3.6, 40.0, 0.0, 36.4, 0.0, 32.0); 
ctx.lineTo(0.0, 8.0); 
ctx.bezierCurveTo(0.0, 3.6, 3.6, 0.0, 8.0, 0.0); 
ctx.lineTo(112.0, 0.0); 
ctx.bezierCurveTo(116.4, 0.0, 120.0, 3.6, 120.0, 8.0); 
ctx.lineTo(120.0, 32.0); 
ctx.closePath( ) ; 
ctx.fill(); 
ctx.linewidth = 2.0; 
ctx.strokeStyle = "rgb(255, 255, 255)"; 
ctx.stroke(); 


} 


window.onload = draw; 


在 这 个 例子 中 ， 变 量 ctx 引用 的 是 画布 的 绘图 空间 (context) 。 所 请 

绘图 空间 ， 在 这 里 就 是 一 个 平面 二 维 的 绘图 表面 ， 其 原点 (0,0) 位 于 

<canvas> 的 左上 角 。 在 这 个 绘图 表面 的 坐标 系 里 ， 越 往 右 x 的 值 越 

大 ， 越 往 下 y 的 值 越 大 。 通 过 在 绘图 空间 中 指定 坐标 点 ， 可 以 绘制 出 各 

ee 。 在 绘制 线条 时 ， 还 可 以 添加 不 同 的 填充 及 描 边 
式 。 


图 11-1 是 在 Chrome 中 显示 的 结果 : 


图 11-1 


当然 ， 这 个 例子 还 很 简陋 。 例 子 中 的 <canvas> 元 素 使 用 了 与 其 他 2D 
绘图 库 相 似 的 API。 这 里 使 用 了 几 个 点 和 曲线 从 一 个 点 到 另 一 个 点 创建 
并 绘制 出 了 一 条 路 径 ， 但 <canvas> 可 不 仅仅 能 够 用 来 绘制 矢量 路 
径 ; 还 可 以 通过 它 来 显示 和 操作 位 图 图 像 。 


比如 说 ， 我 们 可 以 使 用 <canvas> 对 象 在 浏览 器 中 把 一 幅 彩 色 图 片 变 
成 灰 度 图 片 。 然 后 ， 当 用 户 的 鼠标 芒 停 到 图 片上 面 时 ， 再 把 它 切换 回 
原始 的 彩色 图 片 。 


先 创建 一 个 HTML 文件， 命名 为 grayscale.html， 其 中 有 一 幅 图 像 ， 与 脚 
本 位 于 同一 个 域 中 。 这 个 页 面 里 也 使 用 了 Modernizr: 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Grayscale Canvas Example</title> 
<script src="scripts/modernizr-1.6.min.js"></script> 


<img src="images/avatar.png" id="avatar" title="Jeffrey Sambells" 
alt="My Avatar"/> 

<script src="scripts/grayscale.js"></script> 

</body> 

</html> 


再 创建 一 个 grayscale .js 文件 ， 并 在 其 中 添加 如 下 脚本 : 


function convertToGS(img) { 


// 如 果 浏 览 器 不 文 持 <canvas> 束 返回 
if (!Modernizr.canvas) return; 


// 存储 原始 的 彩色 版 


img.color = img.src,; 


// 创建 灰 度 版 
img.grayscale = createGSCanvas(img); 


// 在 mouseover/out 事件 发 生 时 切换 图 片 
img.onmouseover = function() { 
this.src = this.color; 


} 


img.onmouseout = function() { 
this.src = this.grayscale; 


} 


img.onmouseout(); 


} 


function createGSCanvas(img) { 


var canvas=document.createElement("canvas"); 
canvas .width= img.width; 
canvas.height=img.height; 


var ctx=canvas.getContext("2d"); 
ctx.drawImage(img,0,o0); 


// 注意 : getImageData 只 能 操作 与 脚本 位 于 同一 个 域 中 的 图 片 
var c = ctx.getIimageData(0, 0, img.width, img.height); 
for (i=0; i<c.height; i++) { 
for (j=0; j<c.width; j++) { 
var x = (i*4) * c.width + (j*4); 
Var r c.data[x]; 
var 9g c.data[x+1]; 


var b = c.data[x+2]; 
c.data[x] = c.data[x+1] = c,data[x+2] = (r+g+b)/3; 


ctx.putImageData(c,o0,0,0,0, c.width, c.height); 
return canvas.toDataURL(); 
} 


// 添加 1oad 事件 。 如 果 有 其 他 脚本 ， 可 以 使 用 addLoadEvent 画 数 
window.onload = function() { 


convertToGS(document .getElementById('avatar',)); 


注意 “在 从 图 片 之 类 的 文件 中 读 取 数 据 时 ， 不 同 浏览 器 有 不 同 的 
安全 考虑 。 为 了 保证 这 个 例子 正常 运行 ， 必 须 在 同一 个 站 点 中 所 

供 图 片 和 文档 。 而 且 ， 就 算 在 本 地 硬盘 中 使 用 file 协议 加 载 这 个 
页 面 ， 例 子 也 无 法 运行 。 虽 然 可 以 修改 浏览 器 的 安全 设置 ， 但 我 

还 是 建议 把 这 个 例子 的 相关 文件 都 上 传 到 Web 服 务 器 中 。 


页 面 加 载 后 ， 脚 本 通过 在 convertToGS 函数 中 应 用 onmouseover 和 
onmouseout 事件 处 理 函 数 来 修改 avatar .png 图 片 。 


img.color = img.src; 

img.grayscale = createGSCanvas(img); 

img.onmouseover = function() { 
this.src=this.color; 


img.onmouseout = function() { 
this.src=this.grayscale,; 


上 述 事 件 处 理 函 数 会 切换 保存 在 图 片 的 src 属性 中 的 原始 彩色 版 ， 以 
及 createGSCanvas 函数 创建 的 灰 度 版 。 


为 了 在 createGSCanvas 函数 中 把 彩色 图 片 转换 为 灰 度 图 片 ， 我 们 创 
建 了 一 个 新 的 canvas 元 素 ， 然 后 在 其 绘图 环境 中 绘制 了 彩色 图 片 : 


var canvas=document .createElement("canvas"); 
canvas .width= img.width; 
canvas.height=img.height; 


Var ctx=canvas.getContext("2d"); 
ctx.drawImage(img,0,0); 


授 下 来 ,再 取得 原始 的 图 像 数 据 ， 循 环 裔 历 其 中 的 每 一 个 像素 ， 将 每 
人 ` 绿 、 赣 彩色 成 分 求 平均 值 ， 得 到 对 应 彩色 值 的 灰 度 


var C = ctx.getIimageData(0, 0, img.width, img.height); 
for (i=0; i<c.height; i++) { 
for (j=0; j<c.width; j++) { 

var x = (i*4) * c.width + (j*4); 

Var r c.data[x]; 

var 9g c.data[x+1]; 

var b c.data[x+2]; 

c.data[x] = c.data[x+1] = c.data[x+2] = (r+g+b)/3; 


剩 下 的 工作 就 是 把 灰 度 数据 再 放 回 到 画布 的 绘图 环境 中 ， 并 返回 原始 
的 图 像 数 据 作为 新 灰 度 图 片 的 源 。 


ctx.putImageData(c, 0, 0, 0, 0, c.width, c.height); 


return canvas.toDataURL(); 


这 样 ， 即 使 我 们 只 提供 彩色 版 图 片 ， 也 可 以 在 该 图 像 的 彩色 版 与 灰 度 
版 之 间 切 换 了 。 


为 什么 使 用 <canvas> 而 不 是 多 张 图 片 昵 ? 只 有 在 基于 用 户 操作 实现 
交互 时 ， 使 用 <canvas> 的 优势 才 会 显现 出 来 。 以 前 ， 要 想 在 浏览 器 
中 实现 高 级 的 图 片 交互 功能 ， 只 能 依靠 Flash 或 Silverlight 这 样 的 插件 。 
今天 ， 有 了 <canvas> ， 就 可 以 在 浏览 器 窗口 绘制 任何 对 象 、 任 何 像 
素 了 。 当 然 ， 还 能 通过 它 来 操作 图 像 ， 或 者 创建 令 人 眼花 综 乱 的 界面 
元 素 。 可 是 ， 就 跟 使 用 Flash 一 样 ， 也 绝对 不 能 滥用 <canvas>。 换 句 


话说 ， 即 使 你 真 的 可 以 在 一 个 <canvas> 元 素 里 创建 一 个 站 点 ， 也 不 
表示 你 应 该 那样 做 。 


此 外 ， 你 还 得 考虑 到 那些 使 用 屏幕 阅读 器 或 其 他 辅助 浏览 技术 的 用 
户 。HTML5 的 这 个 <canvas> 元 素 跟 Flash 一 样 ， 都 不 具备 可 访问 性 ， 
会 给 那些 用 户 带 来 同样 的 烦恼 。 记 住 ， 不 要 被 先进 技术 的 光环 左右 了 
你 的 心智 ， 必 要 时 还 要 留 一 手 。 


11.3.2 ”音频 和 视频 


谈 到 HTML5 的 新 元 素 ， 人 们 议论 最 多 的 您 怕 束 要 数 <video> 和 它 的 亲 
兄弟 <audio> 了 。 这 两 个 元 素 让 HTML 具 有 了 原生 视频 和 首 频 的 能 
力 ， 但 也 市 来 了 一 些 不 好 处 理 的 问题 。 


在 HTML5 之 前 ， 向 网 页 中 骸 入 视频 需要 用 到 一 大 堆 重 复 的 <object> 
和 <embed> 元 素 ， 其 中 一 些 在 HTML4 中 甚至 都 无 法 通过 有 效 性 验证 。 
<object> 可 以 引用 各 种 影 斤 播放 二 ， 例 如 QuickTime、RealPlayer 或 
Flash， 并 使 用 这 些 插件 在 浏 咒 器 中 播放 影片 。 举 个 例子 ， 以 下 束 是 骨 
入 Flash 影 片 的 代码 (想必 你 一 定 觉得 很 眼熟 ) : 


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8- 
444553540000" width="100" height="100" 
codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swfl 
ash.cab#version=9,0,0,0"> 

name="movie" value="moviename. swf"> 

name="play" value="true"> 


name="loop" value="true"> 

name="quality" value="high"> 

src="moviename.swf" width="100" height="100" 
play="true" loop="true" quality="high" 
pluginspage=" http://get.adobe.com/flashplayer" /> 
</object> 


除了 这 些 代 码 之 外 ， 第 三 方 插件 也 有 各 目的 问题 和 局 限 性 。 要 想 让 藤 

入 的 代码 发 挥 作用 ， 浏 哎 器 中 必须 安装 相应 的 插件 ， 而 且 版 本 还 要 合 

适 。 搬 件 十 在 一 个 封闭 的 环境 中 运行 的 ， 通 过 脚本 无 法 修改 或 者 操作 

0 。 如 果 搬 件 没有 提供 API， 插 件 运行 环境 无 异 于 文档 中 的 一 个 
Y ° 


HTML5 的 <video> 元 素 为 在 文档 中 崩 入 影片 以 及 与 影片 交互 是 义 了 一 
种 标准 方式 ， 同 时 也 把 舱 入 操作 简化 成 了 一 个 标签 : 


<video src="movie.mp4"> 
<!-- Alternative content when video is not supported --> 


<a href="movie.mp4">Download movie.mp4</a> 
</video> 


这 里 我 们 舱 入 了 一 段 mp4 视 频 ， 并 给 出 了 浏 贤 万 不 文 持 <video> 时 的 
蔡 代 下 载 链 接 。 


类 似 地 ，<audio> 元 素 的 用 法 也 差不多 : 


<audio Src="Ssound.0gg"> 
<!-- Alternative content when audio is not Supported --> 


<a href="sound.ogg">Download sound.o0gg</a> 
</audio> 


简单 、 朴 素 ， 还 很 吸引 人 ， 和 是 吗 ? 除非 它 总 能 如 此 .……. 
01. 也 有 混乱 的 时 候 


让 人 失望 的 是 ，HTML5 的 <video> 和 <audio> 元 素 也 有 那么 点 
小 问题 。 这 两 个 标签 都 很 简单 ， 也 都 有 相应 的 属性 用 于 显示 播放 
控件 或 更 改 播放 设置 ， 但 是 它 并 未 说 明 支 持 哪些 视频 格式 。 


要 捅 清 楚 有 天 视频 格式 的 问题 ， 必 须 从 什么 是 视频 说 起 。 


像 movie .mp4 这 样 的 视频 ， 其 实 是 一 个 包含 很 多 东西 的 容器 。 扩 

展 名 mp4 表 示 视 频 是 使 用 基于 苹果 QuickTime 技 术 的 MPEG4 打 包 而 

成 的 。 这 个 容器 规定 了 不 同 的 音频 和 视频 轨道 在 文件 中 的 位 置 ， 

以 及 其 他 与 回放 相关 的 特性 。 其 他 容器 还 有 m4v 〈 另 一 个 MPEG4 

扩展 名 ) 、avi (Audio Video Interleave， 音 频 视 频 交 错 ) 、flv 
(Flash Video) ， 等 等 。 


在 每 个 影片 容 右 中 ， 音 频 和 视频 轨 关 都 使 用 不 同 的 编 解 码 器 来 纺 
码 。 编 解码 占 决 是 了 浏览 右 在 播放 时 应 该 如 何 解 码 首 频 和 视频 。 


编 解 码 器 的 核心 融 是 一 个 算法 ， 用 于 压缩 和 存储 视频 ， 以 减少 原 
始 文件 的 大 小 ， 同 时 可 能 会 也 可 能 不 会 损失 品质 。 视 频 编 解码 大 
也 有 很 多 种 ， 其 中 有 代表 性 的 有 三 个 : H.264、Theora 和 VP8。 同 
样 ， 音 频 文件 也 有 相应 的 编 解 码 器 ， 常 见 的 有 mp3 (MPEG-1 

3) ~aac (Advanced Audio Coding) 和 ogg (Ogg 
Vorbis) 。 


注意 ”H.264 编 解码 器 存在 一 个 非 技 术 问 题 ， 即 使 用 许可 。 使 
用 HH.264 的 解码 器 和 编码 絮 都 要 付费 ， 分 发 经 编码 许可 制作 的 
H.264 内 容 不 用 付费 ， 但 要 对 其 解码 则 必须 得 到 许可 。 换 句 话 
说 ， 在 你 自己 的 网 站 上 发 布 H.264 影 片 不 用 交 钱 ， 但 需要 对 其 
解码 的 浏览 器 开发 商 以 及 开发 解码 软件 的 软件 开发 商都 要 得 
到 许可 才 行 。 为 了 解决 视频 格式 的 许可 问题 ， 合 歌 把 VP8 编 解 
码 器 (在 WebM 容 器 中 ) 的 专利 权 发布 到 了 公共 域 ， 并 承诺 水 
不 收回 。 他 们 的 愿望 是 让 浏览 器 开发 商 在 实现 
WebMV/VP8/Vorbis 时 不 受 许可 限制 ， 并 回 所 有 人 提供 一 种 公共 
的 格式 。 


这 些 不 同 的 容 需 格式 以 及 编 解 码 器 给 我 们 市 来 了 什么 问题 呢 ? 问 
题 束 是 没有 一 款 浏 砚 豆 文 持 所 有 容器 和 编 解 码 锅 ， 因 此 我 们 必须 
提供 多 种 后 备 格式 。Firefox 的 某 些 版 本 、Chrome 以 及 Opera 文 持 
Theora/Vorbis/Ogg, IE9、 Safari、Chrome、Mobile Safari 以 及 
Android 文 持 H.264/ACC/MP4， 而 IE9、Firefox、Chrome 还 有 Opera 
支持 WebM (VP8 和 Vorbis 的 男 一 种 容器 格式 ) 。 


如 此 混乱 的 结果 意味 着 没有 哪些 格式 可 以 路 浏览 需 。 但 愿 这 个 问 
题 在 不 久 的 将 来 能 够 解决 ， 否 则 视频 这 一 块 会 让 整个 HTML5 黯 然 
失色 。 眼 下 看 来 ， 为 了 保证 每 个 人 都 能 看 到 视频 ， 必 须 制 作 多 种 
格式 的 视频 并 在 <video> 元 素 中 包含 多 个 来 源 : 


<video id="movie" preload controls> 
<source src="movie.mp4" /> 
<source src=" movie.webm" 
type="'video/webm; codecs="vp8, vorbis"' /> 
<source src="movie,.ogv" 
type='video/ogg; codecs="theora, vorbis"' /> 
<p>Download movie as 
<a href="movie.mp4">MP4</a>, 
<a href="movie.webm">WebM</a>， 
or <a href="movie.ogv">0gg</a>.</p> 
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</video> 


为 了 确保 HTML5 的 最 大 兼容 性 ， 至 少 要 包含 下 列 三 个 版 本 : 


。 基于 H.264 和 AAC 的 MP4 
。 WebM (VP8+Vorbis) 
。 基于 Theora 视 频 和 Vorbis 音 频 的 Ogg 文 件 


这 个 例子 中 没有 给 出 可 替代 的 插件 版 。 为 了 确保 最 大 程度 地 兼容 
那些 不 支持 HTML5 的 浏览 器 ， 一 般 还 应 该 准备 一 个 Flash 或 
QuickTime 插 件 版 视频 。 但 在 这 里 ， 为 或 励 用 户 升级 到 较为 匈 进 的 
浏览 硕 ， 我 所 供 了 直接 下 载 不 同 格式 文件 的 链接 。 


注意 ”不同 的 视频 格式 的 排列 次 序 也 是 一 个 问题 。 把 MP4 放 
在 第 一 位 ， 是 为 了 让 保证 iPad、iPhone 及 iPod Touch 等 运行 iOS 
的 设备 能 够 顺利 读 取 视频 。 因 为 OS 4 之 前 版 本 中 的 Mobile 
Safari 只 能 解析 一 个 <video> 元 素 ， 故 而 把 针对 iOS 的 格式 放 
在 了 最 前 面 。 


总 之 ， 这 些 问 题 让 HTML5 视 频 和 音频 变 得 有 点 乱 ， 一 定 程度 上 影 
啊 了 它 的 吸引 力 。 想 想 要 制作 同一 视频 的 多 个 版 本 ， 并 且 要 保存 
二 个 其 至 更 多 个 文件 ， 有 人 不 茶会 器 ， 有 既然 最 后 还 是 要 提供 Flash 
版 本 ， 那 为 什么 不 直接 就 提供 一 个 Flash 影 片 算 了 ? 答案 是 向 前 兼 
容 ， 提 供 较 新 的 <video> 元 素 ， 可 以 在 文 持 HTML5 的 浏览 右 中 对 
视频 内 容 进行 更 多 控制 。 


对 HTML5 视 频 ， 可 以 (或 将 来 可 以 ) 应 用 CSS 属 性 以 修改 视频 的 
外 观 、 大 小 及 形状 ， 可 以 添加 字幕 和 歌词 等 信息 ， 还 可 以 组 合 视 
频 和 画布 来 履 盖 内 容 。 甚 至 可 以 把 视频 插入 到 <canvas> 对 象 

中 ， 像 前 面 处 理 灰 度 图 片 一 样 ， 通 过 分 析 图 像 来 检测 视频 运动 。 


下 面 通过 一 个 例子 来 说 明 <video> 元 素 的 API， 看 看 怎样 定制 视 
频 控 件 ， 有 怎样 创建 简单 的 播放 按钮 。 


. 自 定义 控件 


浏览 器 在 显示 <video> 元 素 时 ， 会 为 其 添加 一 些 与 浏览 器 样式 统 
一 的 标准 播放 控件 。 要 想 自 定义 这 些 控件 的 外 观 ， 或 者 添加 新 的 


控件 ， 可 以 通过 一 些 DOM 属 性 来 实现 ， 主 要 包括 : 


。 currentTime ， 返 回 当前 播放 的 位 置 ， 以 秒表 示 ; 

。 duration ， 返 回 媒体 的 总 时 长 ， 以 秒表 示 ， 对 于 流 媒 体 返 
回 无 穷 大 ; 

。 paused ， 表 示 媒 体 是 否 处 于 暂停 状态 。 


此 外 ， 还 有 一 些 与 特定 媒体 相关 的 事件 ， 可 以 用 来 触发 你 的 脚 
本 ”主要 事件 有 ， 


。play ， 在 巡 体 播放 开始 时 发 生 ; 

。 pause ， 在 媒体 暂停 时 发 生 ; 

。 1oadeddata ,在 媒体 可 以 从 当前 播放 位 置 开 始 播 放 时 发 
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。 ended ,在 媒体 已 播放 完成 而 停止 时 发 生 。 
使 用 这 些 及 其 他 属性 和 事件 ， 可 以 轻松 地 创建 自 定 义 的 视频 控 
件 ， 实 现 对 视频 的 各 种 控制 。 从 暂停 和 播放 按钮 到 滑动 条 (进度 
条 ) ， 都 没有 问题 。 


不 管 创建 什么 控件 ， 都 别 筷 了 在 <video> 元 素 中 添加 controls 
属性 : 


<video src="movie.ogv" controls> 


这 行 代码 会 呈现 出 一 个 类 似 Chrome 浏 览 器 中 所 示 的 常见 的 播放 控 
制 界 面 ， 如 图 11-2 所 示 ， 但 其 中 的 控件 可 以 通过 脚本 来 移 走 。 


00:11 是 


图 11-2 


ee 我 们 掌握 的 DOM 脚 本 技能 ， 来 创建 一 些 简 单 的 视频 控 


注意 ”读者 如 果 需 要 示例 文件 ， 可 以 从 
http://www.friendsofed.com/ 中 本 书页 面 下 载 源 代码 。 


第 一 步 先 创建 一 个 简单 的 HTML 页 面 ， 命 名 为 novie ,htm1L。 在 
其 中 添加 一 个 <video> 元 素 ， 并 按照 前 面 的 介绍 指定 多 种 视频 格 
式 。 此 外 ， 页 面 中 还 要 包含 player ,css 样式 表 和 player .js 
脚本 : 


<!IDOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="utf-8" /> 


<title>My Video</title> 

<link rel="stylesheet" href="styles/player.css" /> 
</head> 
<body> 


<div class="video-wrapper"> 
<video id="movie" controls> 
<source src="movie.mp4" /> 
<source src=" movie,.webm" 
type='video/webm; codecs="vp8, vorbis"' /> 


<source src="movie.ogv" 
type='video/ogg; codecs="theora, vorbis"' /> 

<p>Download movie as 
<a href="movie.mp4">MP4</a>, 
<a href="movie.webm">webM</a>, 
or <a href="movie.ogv">0gg</a>.</p> 

</video> 
</div> 


<script src="scripts/player.js"></script> 
</body> 
</html> 


在 player .js 文件 中 ， 我 们 要 修改 页 面 中 的 所 有 <video> 元 
素 ， 删 除 其 内 置 控件 并 添加 自 定 义 的 Play 按 钮 。 把 下 面 两 个 完整 的 
函数 添加 到 player .js 文件 中 : 


function createVideoControls() { 
var vids = document.getElementsByTagName('video'); 
for (var i = © ; i < vids.length ; i++) { 
addCcontrols( vids[i] ); 
} 
} 


function addControls( vid ) { 
vid.removeAttribute('controls'); 


vid.height = vid.videoHeight; 

vid.width = vid.videowidth; 
vid.parentNode.style.height = vid.videoHeight + 'px'; 
vid.parentNode.style.width = vid.videowidth + 'px'; 


var controls = document.createElement('div'); 
controls.setAttribute('class','controls'); 


var play = document.createElement('button'); 
play.setAttribute('title', 'Play'); 
play.innerHTML = '&#x25BA;'; 
controls.appendchild(play); 
vid.parentNode.insertBefore(controls, vid); 
play.onclick = function () { 


if (vid.ended) { 
vid.currentTime = 0; 


} 

if (vid.paused) { 
vid.play(); 

} else { 
vid.pause( ); 


}; 


vid.addEventListener('play', function () { 
play.innerHTML = '&#xXx2590;&#X2590;'; 
play.setAttribute('paused', true); 

}, false); 


vid.addEventListener('pause', function () { 
play.removeAttribute('paused'); 
play.innerHTML = '&#x25BA;'; 

}, false); 


vid.addEventListener('ended', function () { 
vid.pause( ); 
}, false); 
} 


window.onload = function() { 
createVideoControls(); 


} 


脚本 文件 player .js 中 的 这 两 个 函数 准备 完成 很 多 任务 。 首 先 ， 
找到 页 面 中 的 video 元 素 ， 然 后 对 它们 分 别 应 用 addCcontrols 
函数 : 


function createVideoControls() { 
var videos = document.getElementsByTagName('video'); 
for (var i = 0 ; i < videos.length ; i++) { 


addControls( videos[i] ); 


} 


} 


在 addControls 函数 中 ， 我 们 删除 了 video 元 素 原 来 的 
controls 属性 ， 从 而 去 掉 其 内 置 的 控件 ， 接 着 又 创建 了 几 个 
DOM 对 和 象 ， 用 来 充当 Play/Pause 按 钮 ， 并 把 它们 都 添加 为 video 
元 素 的 子 元 素 。 


function addCcontrols( vid ) { 


vid.removeAttribute('controls'); 


vid.height = vid.videoHeight; 

vid.width = vid.videowidth; 
vid.parentNode.style.height = vid.videoHeight + 'px'; 
vid.parentNode.style.width = vid.videowidth + 'px'; 


var controls = document.createElement('div'); 
controls.setAttribute('class','controls'); 


var play = document.createElement('button'); 
play.setAttribute('title', 'Play'); 
play.innerHTML = '&#Xx25BA;'; 
controls.appendchild(play); 


vid.parentNode.insertBefore(controls, vid); 


接 下 来 ， 给 Play 按 钮 添加 一 个 click 事件 ， 以 便 单 击 它 播放 影 
BB 


play.onclick = function () { 
if (vid.ended) { 
vid.currentTime = 0; 


} 

if (vid.paused) { 
vid.play(); 

} else { 
vid.pause( ); 


} 
}; 


最 后 ， 利 用 play 、pause 和 ended 事件 来 修改 Play 按钮 的 状 
态 ， 并 在 影片 未 暂停 的 情况 下 显示 Pause 按 钮 。 


vid.addEventListener('play', function () { 
play.innerHTML = '&#x2590;&#X2590;'; 
play.setAttribute('paused', true); 

}, false); 


vid.addEventListener('pause', function () { 
play.removeAttribute('paused'); 
play.innerHTML = '&#Xx25BA;'; 

}, false); 


vid.addEventListener('ended', function () { 
vid.pause( ); 
}, false); 


注意 ” 念 怕 有 读者 注意 到 了 ， 这 里 使 用 的 是 


addEventListener 方法 为 视频 添加 事件 。 
addEventListener 是 为 对 象 添 加 事件 处 理 函 数 的 规范 方 
法 。 之 前 我 们 使 用 onclick 之 类 的 HTML-DOM 的 on 前 绥 属 
性 ， 是 因为 耻 (IE 8 及 以 前 版 本 ) 使 用 的 是 一 个 不 同 的 
attachEvent 方法 。 而 到 了 IE 9， 它 支持 <video> ， 也 是 
完成 本 章 示例 必需 的 ， 也 开始 支持 规范 的 
addEventListener 方法 了 。 因 此 ， 在 本 章 的 例子 中 使 用 该 
方法 是 没有 问题 的 。 


为 了 给 控件 添加 样式 ， 需 要 在 player ,css 中 添加 下 列 CSS 样 
式 。 可 以 使 用 CSS 对 控件 外 观 随 心 所 欲 地 更 改 : 


.Video-wrapper { 
overflow: hidden; 


} 


.Video-wrapper .controls { 
position: absolute; 
height:30px; 
width:30px; 
margin: auto; 
background: rgba(0,0,0,0.5); 

} 


.Video-wrapper button { 
display: block; 
width: 100%; 
height: 100%; 
border: 0; 
cursor: pointer,; 
font-size: 17px; 
color: #fff; 
background: transparent ; 


} 


.Video-wrapper button[paused] { 
font-size: 12px; 


} 


页 面 加 载 完 成 后 ，window .load 事件 就 会 执行 
createVideoControls 函数 ， 结 果 就 会 得 到 一 个 相对 粗糙 的 祝 
频 控制 界面 ， 可 以 用 来 播放 和 和 暂停 视频 ， 如 图 11-3 所 示 。 
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图 11-3 


这 个 人 简单 的 例子 只 包含 最 基本 的 控件 ， 在 此 基础 上 ， 还 可 以 利用 
相应 的 属性 和 事件 添加 带 位 置 指示 需 的 滑动 条 、 时 间 玲 ， 以 及 其 
他 特殊 的 控件 。 到 确 添 加 哪个 控件 ， 完 全 由 你 说 了 算 。 建 议 大 家 
抽 衬 学 习 一 下 HTML5 视 频 规范 中 其 他 与 视频 相关 的 属性 ， 地 址 为 
http:/www.whatwg.org/specs/web-apps/current- 
work/multipage/video.html#video 。 另 外 ， 也 可 以 访问 
http:/www.w3.org/2010/05/video/mediaevents.html ， 看 看 其 中 给 出 
的 一 些 实 例 。 最 后 ， 给 大 家 推荐 一 本 书 ， 女 博士 Silvia Pfeiffer 撰 写 
的 The Definitive Guide to HTML5 Video (Apress，2011) ， 看 看 使 
用 <video> 元 素 还 能 做 哪些 事 。 


11.3.3 ”表单 


我 们 要 介绍 的 最 后 一 个 HIML5 元 素 束 是 表单 。 表 单 的 身影 几乎 可 以 在 
任何 一 个 网 页 中 看 到 ， 但 在 HTML5 之 前 ， 可 用 的 输入 控件 类 型 却 少 得 
可 怜 。 文 本 框 、 单 选 按钮 、 复 选 框 对 于 简单 的 表单 是 够 用 了 ， 但 在 需 
要 更 多 交互 功能 的 时 候 ， 仍 然 免不了 求 诸 DOM 脚 本 披挂 上 阵 。 如 果 想 
让 用 户 更 方便 地 在 表单 中 输入 日 期 ， 就 得 自己 构建 界面 和 必要 的 
JavaScript。 老 天 有 上 腿 ，HTML5 给 我 们 带 来 了 很 多 新 表单 元 素 、 新 输入 
控件 类 型 和 新 的 属性 ， 帮 我们 实现 了 这 些 功 能 。 不 过 ， 跟 以 往 一 样 ， 
你 的 DOM 编 程 才 能 还 是 可 以 派 上 用 场 的 。 


新 的 输入 控件 类 型 包括 : 


email ， 用 于 输入 电子 邮件 地 址 ; 
url ， 用 于 输入 URL; 

date ， 用 于 输入 日 斯 和 时 间 ; 
number ， 用 于 输入 数值 ; 
range ， 用 于 生成 请 动 条 ; 
search ， 用 于 搜索 框 ; 

tel ， 用 于 输入 电话 号 码 ; 
color ， 用 于 选择 颜色 。 


这 些 新 类 型 比 单 纯 的 type="text'" 好 用 多 了 。 浏 贤 器 知道 这 些 控件 都 

接受 什么 类 型 的 输入 ， 因 此 可 以 为 它们 配备 不 同 的 输入 控件 ， 例 如 在 

移动 设备 上 更 换 不 同 的 软 键盘 。 图 11-4 中 两 幅 图 是 iPhone 中 Mobile 

一 幅 是 针对 文本 输入 框 的 键盘 ， 一 幅 是 针对 电子 邮件 地 
9 键盘 。 
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图 11-4 
相应 地 ， 新 的 属性 包括 如 下 这 些 。 


autocomplete ， 用 于 为 文本 (text) 输入 框 添加 一 组 建议 的 输 
入 项 ; 

autofocus ， 用 于 让 表单 元 素 自 动 获得 焦点 ; 

form ， 用 于 对 <form> 标签 外 部 的 表单 元 素 分 组 ; 

min 、max 和 step ， 用 在 范围 (range) 和 数值 number) 输入 
框 中 ; 

。 pattern ， 用 于 定义 一 个 正则 表达 式 ， 以 便 验 证 输入 的 值 ; 

。 placeholder ， 用 于 在 文本 输入 框 中 显示 临时 性 的 提示 信息 .; 
。required ， 表 示 必 填 。 


这 些 属性 把 很 多 原来 由 DOM 脚 本 负责 的 任务 都 转移 给 了 浏览 右 ， 例 如 


是 供 自 动 完成 的 建议 项 和 验证 表单 给 入。 但 我 们 要 关注 的 问题 ， 是 在 
浏览 器 不 支持 新 的 类 型 和 属性 时 怎么 办 。 


cxt 


当然 ， 现 在 束 可 以 使 用 这 些 新 增 的 输入 控件 ， 因 为 它们 都 癌 后 兼容 
( 某 种 程度 上 如 此 ) 。 对 于 HIML5 的 电子 邮件 输入 框 而 言 : 


<input type="email" /> 


旧 浏 览 器 会 将 该 类 型 默认 为 text ， 并 呈现 出 标准 的 文本 输入 框 。 对 于 
email 或 search 类 型 的 输入 框 来 说 ， 这 不 会 造成 什么 大 问题 ， 但 对 
于 range 滑动 条 就 不 行 了 。 想 象 一 下 ， 原 本 应 该 是 滑动 条 ， 但 现在 却 
是 一 个 输入 框 ， 比 如 Safari 和 IE 显 示 的 range 控件 ， 如 图 11-5 所 示 。 
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图 11-5 
为 了 应 对 不 兼容 的 浏览 器 ， 必 须 使 用 特性 检测 来 准备 男 一 个 方案 。 
使 用 本 章 前 面 提 到 的 Modermnizr 库 ， 就 可 以 进行 兼容 性 检查 。 比 如 ， 要 


检查 浏览 器 是 否 支 持 某 个 输入 类 型 的 控件 ， 可 以 使 用 
inputtypes.type 属性 : 


If ( !Modernizr.inputtypes.date ) { 


// 生成 日 期 选择 器 的 脚本 


而 要 检查 某 个 属性 ， 则 可 以 使 用 input .attribute 属性 : 


if ( !Modernizr.input.placeholder ){ 
// 生成 占 位 符 提示 信息 的 脚本 


要 是 没有 使 用 Modernizr， 可 以 使 用 下 面 这 个 jnputSupportsType 画 
数 来 检查 浏览 万 旦 否 文 持 某 种 类 型 的 输入 控件 : 


function inputSupportsType(type) { 
if (!document.createElement) return false; 
var input = document.createElement('input'); 
input.setAttribute('type',type); 
If (input.type == 'text' && type != 'text') { 


return false; 
} else { 
return true; 
} 
} 


使 用 inputSupportsType 函数 的 方式 与 使 用 Modernizr 一 样 : 


If ( !inputSupportsType('date') ) { 
// 生成 日 期 选择 器 的 脚本 


要 检查 特定 的 属性 ， 可 以 使 用 下 面 这 个 
elementSupportsAttribute 函数 : 


function elementSupportsAttribute(elementName, attribute) { 
if (!document.createElement) return false; 
var temp = document.createElement(elementName); 
return ( attribute in temp ); 


} 
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使 用 elementSupportsAttribute 函数 的 方法 还 是 那样 ， 只 不 过 需 
要 传 入 元 素 名 和 要 检查 的 属性 名 : 


if ( !elementSupportsAttribute( 'input', 'placeholder' ) ){ 


// 生成 占 位 符 提 示 信 息 的 脚本 


} 


在 稳妥 的 特性 检查 的 基础 上 ， 就 可 以 一 方面 试用 新 的 HTML5 表 单元 
素 ， 男 一 方面 提供 备用 的 DOM 脚 本， 以 便 浏 咒 右 不 文 持 某 种 类 型 或 属 
性 时 “挺身 而 出 ”。 


举 个 例子 ， 假 设 你 想 在 自己 的 文本 输入 框 中 加 入 占 位 符 信 息 。 在 
HTML5 中 ， 只 要 像 下 面 这 样 使 用 placeholder 残 行 了 : 


<input type="text" id="first-name" placeholder="Your First Name" /> 


在 Safari 或 Chrome 浏 览 器 中 ， i 位 符 会 在 用 户 尚 未 输入 值 的 情况 下 显示 
指定 的 临时 文本 ， 如 图 11-6 所 示 。 


Your First Name 


图 11-6 


要 在 不 文 择 placeholder 属性 的 浏览 硕 中 实现 相同 的 效 末 ， 束 得 编写 
一 个 简单 的 DOM 脚 本 来 完成 同样 的 功能 : 


if ( !Modernizr.input.placeholder ) { 
var input = document.getElementById('first-name') 
input.onfocus = function () { 
var text = this.placeholder || 
this.getAttribute('placeholder'); 
if ( this.value == text ) { 
// 重 置 输入 框 的 值 ， 以 隐藏 临时 的 占 位 符 文 本 


this.value = ''，; 


input.onblur = function () { 
If ( this.value == '' ) { 
// 把 输入 框 的 值 设置 为 占 位 符 文本 
this.value = this.placeholder || 
this.getAttribute('placeholder'); 
} 


} 
// 在 onblur 处 理 函 数 运行 时 中 添加 占 位 符 文本 
input .onblLur()， 


当然 ， 这 个 奉 代 方案 的 主要 问题 是 必须 依赖 于 JavaScript 实 现 同样 的 功 
能 。 因 此 ， 还 必须 考虑 到 在 JavaScript 不 可 用 的 情况 下 选择 什么 输入 控 
件 最 合适 。 


要 作为 后 备 的 高 级 功能 (如 自动 完成 和 滑动 条 ) 越 多 ， 开 发 工作 量 就 
越 大 ， 占 用 时 间 就 越 多 。 所 以 还 建议 大 家 选择 已 有 的 一 些 帮 有 我 们 完成 
nn 。 要 了 解 有 天 JavaScript 库 的 相关 内 容 ， 请 参考 本 书 附 


11.4 HTML5 还 有 其 他 特性 吗 


有 ! 本 章 前 面 介绍 的 这 几 个 标签 和 属性 只 是 HTML5 的 冰山 一 角 而 已 。 
请 读者 注意 ，HTML5 这 个 规范 至 今 仍然 没有 尘埃 落 定 ， 很 多 地 方 都 有 
可 能 发 生变 化 。 在 浏 拓 器 文 持 不 是 特别 完善 的 情况 下 ， 全 面 转 入 
HTML5 还 为 时 过 早 ， 但 这 不 会 影响 我 们 继续 探索 的 兴致 。 比 如 ， 
HTML JavaScript API 可 是 我 们 大 家 期 望 已 人 的 了 。 等 不 了 多 长 时 间 ， 
我 们 就 可 以 享受 HTML5 的 诸多 便捷 功能 


。 使 用 localStorage 和 sessionStorage 在 客户 端 存储 大 型 和 复杂 数据 集 
的 更 有 效 方案 (http://dev.w3.org/html5/webstorage ) ; 
。 使 用 WebSocket 与 服务 融 端 脚本 进行 开放 的 双 回 通信 
(http://dev.w3.org/html5/websockets/ ) ; 
。 使 用 Web Worker 在 后 台 执 行 JavaScript 
(http://www.whatwg.org/specs/web-workers/current-work/ ) ; 
。 标准 化 的 拖 放 实现 (http://www.whatwg.org/specs/web-apps/current- 
work/multipage/dnd.html#dnd ) ; 
。 中 实现 地 理 位 置 服务 (http://www.w3.org/TR/geolocation- 
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这 些 新 功能 并 不 都 与 DOM 相 关 ， 但 它们 却 是 你 应 该 了 解 和 掌握 并 在 不 
久 的 将 来 每 天 都 会 使 用 的 ， 所 以 最 好 提前 多 花 些 时 间 熟 悉 它 们 。 


要 了 解 更 多 相关 内 容 和 示例 ， 请 参考 以 下 资源 。 


W3C HTMLS5 Working Draft: http://www.w3.org/TR/html5s ; 
WHATWG HIML5 (包含 开发 中 的 下 一 代 技 术 ) : 
http:/www.whatwg.org/specs/web-apps/current-work ; 
HTML5 的 交互 性 演示 : http://html5demos.com/ ; 
HTML5 相 关 的 PPT、 代 码 、 示 例 及 教程 : 
http://www.html5rocks.com/ ; 

Dive into HTML5 ， 作 者 Mark Pilgrim: http://diveintohtml5.org/ ; 


11.5 小结 


本 章 ， 我 们 了 解 了 HTML5 以 及 使 用 Modernizr 等 工具 检测 特性 的 重要 
性 。 同 时 也 编写 了 几 个 例子 ， 介 绍 如 何 使 用 特性 检测 来 确保 为 新 的 
HTML5 特 性 提供 后 备 功 能 。 本 章 介 绍 的 HTML5 的 新 特性 包括 : 

。 9 以 用 来 在 文档 中 绘制 和 拓 量 及 位 图 的 <canvas> 元 素 ; 

。 可 以 免 插 件 而 直接 在 网 页 中 租 入 首 频 和 视频 的 <audio> 和 

<Video> 元 素 ; 

。 可 以 为 你 提供 更 广泛 选择 的 新 的 表单 控件 类 型 以 及 新 的 属性 。 
到 目前 为 止 ， 我 们 掌握 的 DOM 脚 本 编程 技能 都 处 于 各 自 为 战 的 状态 。 
我 们 就 把 前 面 学 到 的 所 有 概念 和 技术 综合 起 来 ， 创 建 一 个 项 


到 了 融会 贯通 学 以 致 用 的 时 候 了 。 


第 12 章 ”综合 示例 
本 章 内 容 


。 组织 内 容 
。 应 用 样式 
。 使 用 JavaScript、DOM 和 Ajax 增 强 功 能 


前 面 我 们 看 到 过 很 多 DOM 脚 本 编程 的 例子 ， 但 那些 为 了 说 明 问题 而 设 
计 的 例子 之 间 都 没有 什么 联系 。 本 半 我 们 束 来 做 一 个 综合 的 项 目 ， 把 
所 有 与 DOM 脚 本 编程 相关 的 技术 学 以 致 用 。 有 具体 来 疯 ， 我 们 会 从 头 开 
始 做 一 个 网 站 ， 然 后 再 用 JavaScript 来 为 这 个 网 站 增加 交互 功能 。 


12.1 项 目 简 介 


有 一 件 美 差 落 在 了 你 的 头 上 ! 作为 一 名 Web 设 计 师 ， 你 被 选中 为 世界 最 
著名 的 乐队 Jay Skript and the Domsters 设 计 一 个 网 站 。 


噢 ， 没 听 说 过 这 个 乐队 ? 不 要 紧 ， 我 们 一 起 来 编 个 故事 。 束 当 你 配合 
我 把 这 章 写 完 吧 ， 假 装 有 那么 一 个 国际 知名 乐队 ， 而 你 恰好 有 幸 被 选 
中 ， 要 承担 起 为 这 个 乐队 设计 网 站 的 任务 。 


这 个 网 站 必须 跟 这 个 乐队 一 样 ， 得 酷 。 要 是 你 能 再 给 网 页 加 上 一 些 交 
互 特性 ， 那 束 酪 纪 了 。 但 是 别 生 了 ， 这 个 网 站 还 必须 对 残疾 用 户 以 及 
搜索 引擎 保持 友好 。 


开办 这 个 网 站 的 主要 目的 束 是 发 布 有 关 乐 队 的 信息 。 无 论 脏 么 构思 这 
个 网 站 ， 首 先 都 得 确保 这 些 信 息 能 让 访客 一 目 了 然 。 下 面 我 们 束 来 看 
看 部 要 做 些 什 么 。 


12.1.1 原始 资料 

客户 已 经 提交 了 构建 网 站 所 需 的 东西 ， 有 关 乐 队 的 介绍 材料 、 这 演 日 
程 ， 还 有 一 些 照 片 。 这 个 网 站 不 需要 太 多 的 页 面 ， 它 本 质 上 就 是 一 个 
宣传 手册 ， 而 这 一 点 也 正 是 你 要 把 握 的 核心 用 户 体 验 。 

12.1.2 ”站 点 结构 


根据 客户 提供 的 货 料 ， 可 以 画 出 一 张 简单 的 站 点 地 图 。 站 点 的 结构 的 
确 不 算 复 淋 ， 至 少 可 以 把 所 有 页 面部 放 在 一 个 文件 夹 里 。 


为 了 准备 站 点 的 制作 ， 创 建 三 个 文件 夹 ， 一 个 叫 images ,保存 要 用 的 
图 片 ; 一 个 叫 styles ,保存 CSS 文 件 ， 一 个 叫 scripts ,保存 
JavaScript 文 件 。 


站 点 文件 夹 的 目录 结构 如 下 所 示 : 


。 /images 
。 /Styles 
。 /Scripts 


说 到 页 面 ， 首 先 得 有 一 个 详细 介绍 乐队 背景 信息 的 页 面 。 其 次 要 有 一 
个 类 似 相 册 的 放 照 片 的 页 面 。 巡 演 日 程 安排 当然 也 要 单独 一 个 页 面 。 
为 了 让 歌迷 与 乐队 沟通 ， 还 必须 有 一 个 联系 页 面 。 最 后 ， 当 然 要 有 一 
个 主页 ， 放 上 乐队 简介 和 站 点 导航 信息 。 以 下 是 要 创建 的 几 个 页 面 

(如 图 12-1 所 示 ) : 


。 Home 
。 About 
e。 Photos 
。 Live 

。 Contact 


HTML HTML HTML HTML HTML 
| 
Esa 
Ls 


Home About Photos Live Contact 
图 12-1 
这 几 个 页 面 对 应 如 下 文件 : 


index.html 
about.html 
photos.html 
J]ive.html 
contact.html 


虽然 每 个 页 面 的 内 容 不 一 样 ， 但 它们 都 要 使 用 相同 的 基本 结构 。 下 面 
该 考虑 为 这 些 页 面 创建 一 个 模板 了 。 


12.1.3 ”页 面 结构 
站 点 的 每 个 页 面 都 要 分 成 儿 个 区 域 。 


。 头 部 区 域 包含 站 点 的 品牌 性 信息 ， 也 是 放 Logo 的 地 方 。 这 个 区 域 
要 使 用 <header> 元 素 。 

。 导航 区 域 中 包含 一 组 链接 ， 指 向 各 个 页 面 。 这 个 区 域 使 用 <nav> 
元 素 。 

。 内 容 区 域 包含 每 一 页 的 实质 性 内 容 ， 这 个 区 域 使 用 <article> 元 
素 。 


因为 要 使 用 HTML5 元 素 ， 所 以 也 要 在 文档 时 <head> 元 素 中 包含 
Modernizr 库 (第 11 章 介绍 过 ) 。 可 以 从 http://modernizr.com/ 下 载 这 个 
0 (撰写 本 章 时 的 最 新 版 本 为 1.6) ， 并 将 其 放 到 scripts 


最 后 ， 模 板 的 代码 没有 多 长 。 


<!IDOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Jay Skript and the Domsters</title> 
<script src="scripts/modernizr-1.6.min.js"></script> 
</head> 
<body> 
<header> 
<nav> 
<ul> 
<1i><a href="index.html">Home</a></1i> 
<1i><a href="about.html">About</a></1i> 
<1i><a href="photos.html">Photos</a></1i> 
<1i><a href="live.html">Live</a></1i> 
<1i><a href="contact.html">Contact</a></1i> 
</U]> 
</nav> 
</header> 
<article> 
</article> 
</body> 
</html> 


把 这 些 代 码 保 存在 template.html 文件 中 。 


在 设计 好 页 面 结构 后 ， 下 面 职 要 一 页 一 页 地 插入 内 容 了 。 不 过 ， 让 我 
们 先 来 设想 一 下 站 点 完 es 


12.2 设计 


既然 知道 了 每 个 页 面 中 都 包含 哪些 结构 化 元 素 ， 而 且 手 里 也 已 经 有 了 
客户 提供 的 资料 ， 那 么 接 下 来 的 外 观 设计 吏 不 难 做 了 。 你 可 以 选择 
Photoshop、Fireworks 或 任何 其 他 的 图 形 设计 工具 ， 做 出 你 认为 适合 的 
任何 风格 的 设计 方案 (如 图 12-2 所 示 ) 。 用 一 位 著名 厨师 的 话说 , “以 
下 是 我 早 整 为 您 准备 好 的 。” 


Jay Skript 
and the 
DOMSTERS 


Thanks for contacting us. We'l get back to you as soon as we can 


图 12-2 


做 完了 视觉 设计 之 后 ， 可 以 把 平面 设计 切 分 成 多 个 图 片 。 把 背景 图 片 
保存 为 background ,gif 。 而 品牌 图 像 保 存 为 logo .gif 。 而 珊 有 一 


点 渐变 的 导航 条 要 命名 为 navbar ,gif 。 最 后 把 人 物 剪影 保存 为 
guitarist.gif。 把 这 些 图 片 都 放 到 images 文件 夹 中 。 


注意 ”如 果 你 不 是 设计 高 手 ， 还 是 建议 你 从 Friend of ED 网 站 
(http://www.friendsofed.com/ ) 的 本 书页 面 中 下 载 本 章 用 到 的 图 
像 。 


12.3 CSS 


现在 ， 你 有 了 基本 的 HTML 模 板 ， 也 知道 目 己 的 站 点 长 什么 样 了 。 通 过 
为 模板 应 用 CSS， 可 以 在 Web 上 再 现 你 的 设计 方案 。 


如 琳 把 所 有 CSS 都 放 到 一 个 文件 中 ， 可 能 会 为 后 期 维护 市 来 一 些 拼 烦 。 
而 把 所 有 CSS 分 别 放 在 几 个 文件 中 则 是 个 好 主意 。 


怎样 组 织 CSS 由 你 决定 ， 但 我 建议 用 其 中 一 个 保存 与 整体 布局 有 关 的 样 
式 ， 用 另 一 个 作为 专门 的 颜色 样式 表 ， 而 用 第 三 个 来 保存 与 版 式 有 天 
的 样 陈 : 

。 layout.css 


。 COlor.css 
。 typography.css 


这 些 样式 表 都 可 以 导入 到 一 个 基本 的 样式 表 中 : 


@import url(layout.css); 
@import url(color.css); 


@import url(typography.css); 


把 包含 这 三 行 代码 的 文件 保存 为 basic.css ， 并 放 在 styles 文件 夹 
中 。 如 有 果 你 想 添 加 一 个 新 样式 表 或 者 删除 一 个 样式 ， 只 要 编辑 


basic.css 即 可 。 


可 以 在 模板 的 <head> 元 素 中 通过 <1ink> 元 素 引 入 这 个 基本 样式 表 。 
然后 ， 再 在 页 面 <header> 中 添加 一 个 <img> 标签 ， 指 同 logo 图 片 。 
此 时 也 可 以 向 <article> 中 添加 一 些 临时 性 填充 文本 。 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Jay Skript and the Domsters</title> 
<script src="scripts/modernizr-1.6.min.js"></script> 
<link rel="stylesheet" media="screen" href="styles/basic.css" /> 
</head> 
<body> 
<header> 
<img src="images/l0ogo.gif" alt="Jay Skript and the Domsters" /> 
<nav> 
<ul> 
<1i><a href="index.html">Home</a></1i> 
<1i><a href="about.htm]l">About</a></1i> 
<1i><a href="photos.html">Photos</a></1i> 
<1i><a href="live.html">Live</a></1i> 
<1i><a href="contact.html">Contact</a></1i> 
</ul> 
</nav> 
</header> 
<article> 
<h1i>Lorem Ipsum Dolor</h1> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Nullam iaculis vestibulum turpis. Pellentesque mattis rutrum 
nibh. Quisque orci, euismod sit amet, sollicitudin et, 
ullamcorper at, lorem. 
Pellentesque habitant morbi tristique senectus et netus 
et malesuada fames ac turpis egestas. 
Ut lectus. Mauris eu sapien non enim dapibus imperdiet. 
Sed eu mauris sed pede mollis commodo. 
Fusce eget est. Sed ullamcorper enim nec est. 
Cras dui felis, porta vitae, faucibus laoreet, sollicitudin eget, 
enim., Nulla auctor. Fusce interdum diam ac eros. 
Mauris egestas. Fusce in elit et sem aliquet pretium. 
Donec nunc erat, sodales ac, facilisis a, molestie eu, massa. 
Aenean nec justo eu neque malesuada aliquet.</p> 
</article> 
</body> 
</html> 


这 样 ， 基 本 的 模板 束 算 完工 了 ， 如 图 12-3 所 示 。 
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图 12-3 


12.3.1 颜色 


样式 表 color .css 是 最 直观 的 。 记 住 ， 不 管 为 哪个 元 素 应 用 什么 颜 
ee 。 否则 ， 束 有 可 能 导致 意外 ， 看 不 到 某 


body { 
color: #fb5; 
background-color: #334; 


} 

a:link { 
color: #445; 
background-color: #eb6; 


a:visited { 
color: #345; 
background-color: #eb6; 


DO 


:hover { 
color: #667; 
background-color: #fb5; 


DO 


:active { 
color: #778; 
background-color: #ec8; 


} 

header { 
color: #ec8; 
background-color: #334; 
border-color: #667; 


header nav { 
color: #455; 
background-color: #789; 
border-color: #667; 


article { 
color: #223; 
background-color: #edc; 
border-color: #667; 
} 
header nav ul { 
border-color: #99a; 
} 
header nav a:link,header nav a:visited { 
color: #eef; 
background-color: transparent; 
border-color: #99a; 
} 
header nav a:hover { 
color: #445; 
background-color: #eb6; 
} 
header nav a:active { 
color: #667; 
background-color: #ec8; 


article img { 
border-color: #bag9; 
outline-color: #dcb; 


#imagegallery a ft 
background-color: transparent; 


} 


此 时 的 模板 已 经 有 了 人 色彩 了 ， 如 图 12-4 所 示 。 
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图 12-4 


12.3.2 ”布局 
基本 的 布局 还 是 相当 人 简单 的 ， 所 有 内 容 都 在 一 栏 中 。 


为 了 让 导航 中 的 链接 水 平 排列 ， 需 要 应 用 一 些 浮 动 效 果 。 除 此 之 外 ， 
layout ,css 也 没有 什么 不 好 理解 的 了 。 


首先 是 为 HTML5 块 元 聚 定义 默认 的 样式 。 主 要 针对 那些 不 文 择 它们 的 
浏览 硕 ， 好 让 这 些 元 素 者 能够 具有 适当 的 块 布 局 。 


其 次 ， 使 用 通 配 选 择 右 把 所 有 元 素 的 内 外 边 距 设置 为 零 。 这 样 束 把 不 
同 浏览 万 为 元 素 设 置 的 不 同 站 外 边 距 全 者 删 除了。 重 设 这 些 值 之 后 ， 
所 有 样式 束 可 以 一 视 同仁 了 


section, header, article, nav { 
display: block; 


* 


{ 
padding: 0; 
margin: 0; 


} 

body { 
margin: 1em 10%; 
background-image: url(../images/background.gif); 
background-attachment: fixed; 
background-position: top left; 
background-repeat: repeat-x; 
max-width: 80em; 


} 

header { 
background-image: url(../images/guitarist.gif); 
background-repeat: no-repeat ; 
background-position: bottom right; 
border-width: .1em， 
border-style: solid; 
border-bottom-width: ©; 


header nav { 
background-image: url(../images/navbar .gif); 
background-position: bottom left; 
background-repeat: repeat-x; 
border-width: .1em， 
border-style: solid; 
border-bottom-width: ©; 
border-top-width: ©; 
padding-left: 10%; 

} 

header nav ul { 
width: 100%; 
overflow: hidden; 
border-left-width: .1em， 
border-left-style: solid; 

} 

header nav 1i { 
display: inline; 


header nav li a ft 
display: block; 
float: left; 
padding: .5em 2em; 
border-right: .1em solid; 


article { 
border-width: .1em， 
border-style: solid; 
border-top-width: ©; 
padding: 2em 10%; 


line-height: 1.8em; 


} 


article img { 
border-width: .1em， 
border-style: solid; 
outline-width: .1em， 
outline-style: solid; 


这 样 ， 我 们 就 通过 CSS 定 义 了 郑 色 和 布局 ， 如 图 12-5 所 示 。 
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图 12-5 


12.3.3” ”版式 


有 时 候 ， 的 确 很 难 分 清 某 些 样式 声明 放 到 哪个 文件 里 更 合适 。 字 体 和 
大 小 很 显 : 然 应 该 放 在 typography. css 里 ， 但 外 边 距 和 内 边 距 呢 ? 很 


难说 它们 到 底 应 该 与 布局 有 关 ， 还 是 与 版 式 有 关 。 在 我 们 这 个 例子 
中 ， 所 内 边 路 信息 都 放 在 了 layout ,css 中 定义 (上 一 节 已 经 定义 
了 ) ， 而 外 边 距 信息 则 会 放 在 typography.css 中。 


body { 
font-size: 76%; 
font-family: "Helvetica","Arial",sans-serif; 


} 
body * { 
font-size: 1em; 


a lt 
font-weight: bold; 
text-decoration: none; 


header nav { 

font-family: "Lucida Grande","Helvetica","Arial",sans-serif; 
} 
header nav a { 

text-decoration: none; 

font-weight: bold; 


article { 
line-height: 1.8em; 


} 
article p { 
margin: 1em 0; 


hi { 
font-family: "Georgia","Times New Roman",sans-serif; 
font: 2.4em normal; 


h2 { 
font-family: "Georgia","Times New Roman",sans-serif; 
font: 1.8em normal; 
margin-top: 1em， 


} 

h3 { 
font-family: "Georgia","Times New Roman",sans-serif; 
font: 1.4em normal; 
margin-top: 1iem; 


} 

#imagegallery li { 
list-style-type: none 

} 


textarea { 
font-family: "Helvetica","Arial",sans-serif; 


} 


现在 ,模板 不 仅 有 了 凑 色 、 布 局 ， 还 具有 了 版 式 ， 如 图 12-6 所 示 。 
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图 12-6 


以 上 三 个 CSS 文 件 (color .css 、layout.css 和 
typography.css ) 都 和 basic .css 样式 表 一 块 ， 放 在 styles 文 
件 赤 让 ” 


12.4 标记 


I 了 ， 样 式 也 都 写 得 老 不 多 了 “。 接 下 来 该 考虑 站 点 中 的 每 个 页 


首先 从 主页 index ,html 开始 ， 这 个 页 面包 含 一 段 介 绍 性 文字 ， 放 在 
<article> 元 素 中 : 


<p id="intro"> 
Welcome to the official website of Jay Skript and the Domsters. 


Here, you can <a href="about.html" title="About">learn more about 
the band</a>, 


view <a href="photos.html" title="Photos">photos of the band</a>, 


find out about <a href="]live.html" title="Tour Date">tour dates</a> 
and <a href="contact.html" title="Contact">get in touch with the 
band</a>. 

</p> 


这 样 ， 主 页 束 完 成 了 ， 如 图 12-7 所 示 。 
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这 段 文字 有 一 个 id， 叫 "intro"。 我 们 要 利用 这 个 id 为 这 段 介绍 添加 
特殊 的 样式 。 此 外 ， 还 可 以 利用 这 个 id 来 添加 一 些 DOM 脚 本 。 


12.5 JavaScript 


在 编写 DOM 脚 本 之 前 ， 必 须 移 确定 怎么 组 织 JavaScript 文 件 。 如 果 站 点 
需要 很 多 长 长 的 脚本 ， 那 最 好 把 它 分 割 成 儿 个 小 文件 ， 正 如 本 书 前 面 
展示 的 那样 。 可 是 ， 有 眼下 这 个 网 站 非常 简单 ， 所 需 的 JavaScript 代 码 也 
不 长 。 为 了 减少 请 求 的 数量 ， 我 们 就 把 所 有 脚本 都 放 在 一 个 叫 
global .js 的 文件 里 。 这 样 也 有 助 于 最 后 缩减 其 代码 。 


先 在 scripts 文件 夹 中 创建 global, js 。 然 后 在 其 中 添加 几 个 整个 
站 点 都 会 用 到 的 函数 。 


肯定 要 用 到 addLoadEvent 函数 (参见 第 6 章 ) ， 因 为 在 文档 完全 加 
载 后 如 果 想 运行 某 个 函数 ， 就 要 用 到 它 。 


二 


function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = func; 
} else { 


window.onload = function() { 
oldonload( ); 
func(); 


另外 ，insertAfter 函数 (参见 第 7 章 ) 也 很 有 用 ， 它 与 
insertBefore 方法 正好 对 应 。 


function insertAfter(newElement, targetElement) { 
var parent = targetElement .parentNode; 
if (parent.lastcChild == targetElement) { 
parent.appendChild(newElement ); 


} else { 
parent.insertBefore(newElement, targetElement .nextSibling); 


} 


} 


最 后 还 需要 一 个 addClass 函数 (参见 第 9 章 ) 。 


function addClass(element,value) { 
If (!element.className) { 
element.className = value; 
else { 
newClassName = element.className; 


newClassName+= " "， 
newClassName+= value; 
element.className = newClassName; 


要 调用 这 个 脚本 ， 应 该 在 模板 页 面 ijindex.html 结束 的 </body> 标签 
之 前 ， 添 加 一 个 <script> 标签 : 


</article> 
<script src="scripts/global.js"></script> 


</body> 
</html> 


这 样 ， 站 点 中 的 每 个 页 面 都 将 包含 global .js 文件 ， 而 其 中 的 函数 也 
可 以 在 这 些 页 面 里 共享 了 。 


实际 上 ， 还 需要 向 global .js 文件 中 添加 一 个 函数 ， 就 是 下 一 节 我 们 
要 写 的 highlightPage 。 


12.5.1 页 面 突 出 显示 


每 当 我 们 基于 模板 页 面 创建 一 个 新 页 面 时 ， 都 要 向 <article> 元 素 中 
oe 。 对 你 要 设计 的 站 点 而 言 ， 这 一 部 分 正 是 每 个 页 面 之 间 不 同 


理想 情况 下 ， 还 应 该 更 新 每 个 页 面 <nav> 元 素 中 的 链接 。 比 如 ， 如 果 
当前 页 面 是 ijndex.html ， 那 么 导航 里 面 就 没有 必要 添加 指 同 当前 
index.html 页 面 的 链接 了 。 


但 在 实际 的 网 站 开发 中 ， 不 太 可 能 一 页 一 页 地 编辑 导航 链 返 。 更 常见 
的 做 法 是 通过 服务 器 端 包 含 技术 ， 把 包含 导航 标记 的 片段 插入 到 每 个 
页 面 中 。 这 里 我 们 束 假 设 服 务 紫 剖 会 包含 下 列 代码 块 : 


<header> 
<img src="images/logo.gif" alt="Jay Skript and the Domsters" /> 
<nav> 
<ul> 
<l1i><a href="index.html">Home</a></1i> 
<l1i><a href="about.html">About</a></1i> 


<l1i><a href="photos.html">Photos</a></1i> 
<]i><a href="]live.html">Live</a></1i> 
<]i><a href="contact.html">Contact</a></1i> 
</U]> 
</nav> 
</header> 


服务 器 端 包 含 可 以 使 用 Apache Server Side Includes (SSIs) 、PHP、 
ASP， 或 者 其 他 服务 硕 端 语言 。 


服务 夯 问 包含 的 优点 是 可 以 把 重用 标记 块 集中 保存 。 这 样 ， 等 到 以 后 
要 更 新 页 面 头 部 或 者 导航 链接 时 ， 只 要 修改 一 个 文件 束 可 以 了 。 但 集 
中 保存 的 缺点 ， 束 是 不 能 在 每 个 页 面 中 目 定义 这 个 块 。 


无 论 如 何 ， 至 少 当前 页 面 的 寻 航 链接 还 是 应 该 突出 显示 的 。 通 过 突出 
显示 ， 访 客 整 能 知道 目 己 “现在 在 这 里 ”。 


修改 color .css 文件 ， 添 加 为 here 类 定义 的 样式 ; 


header nav a.here:link, 
header nav a.here:visited, 
header nav a.here:hover, 
header nav a.here:active { 
color: #eef; 
background-color: #799; 


为 了 应 用 刚刚 定义 的 颜色 样式 ， 为 指 疝 当 前 页 面 的 导航 链接 添加 here 
类 ， 如 下 所 示 : 


<a href="index.html" class="here">Home</a></1i> 


如 果 使 用 服务 右 端 包含 的 话 ， 要 做 到 这 一 点 可 束 不 容易 了。 一 般 来 
说 ， 服 务 器 端 拉 术 应 该 为 每 个 页 面 创建 正确 的 标记 。 但 实际 情况 却 并 
非 始 终 如 此 。 

JavaScript 这 个 时 候 丈 能 派 上 用 场 了 。 

在 这 个 例子 中 ，JavaScript 是 最 后 一 招 了 “。 如 采 能 在 标记 中 直接 添加 
here 类 ， 当 然 最 好 了 。 但 是 ， 如 采 探 制 不 了 标记 ， 残 只 好 求助 
JavaScript 了 。 


首先 ， 删 除 已 经 添加 到 导航 链接 中 的 所 有 class 属性 。 然 后 ， 编 写 一 
个 hightlightPage 函数 ， 完 成 下 列 操作 : 


(1) 取得 导航 列表 中 所 有 链接 
(2) 循环 遍历 这 些 链接 ; 
(3) 如 果 发 现 了 与 当前 URL 匹 配 的 链接 ， 为 它 添加 here 类 。 


同 往常 一 样 ， 先 在 函数 中 添加 检查 要 使 用 的 DOM 方 法 的 代码 。 此 外 ， 
还 要 检查 各 种 元 于 是 人 否 存 在 。 


function highlightPpage() { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
var headers = document.getElementsByTagName( 'header'); 


if (headers.length == 0) return false; 
var navs = headers[0].getElementsByTagName( 'nav'); 
if (navs.length == 0) return false; 


取得 导航 链接 ， 然 后 循环 人 裔 历 它们 : 


var links = navs[0].getElementsByTagName("a"); 
var linkuril; 


for (var i=0; i<links.length; i++) { 


接 下 来 ， 要 比较 当前 链接 的 URE 与 当前 页 面 的 URL。 要 取得 链接 的 
URL， 可 以 使 用 getAttribute("href") ， 而 要 取得 当前 页 面 的 
URL， 则 可 以 使 用 window.location.href 。 


linkurl = links[i].getAttribute("href"); 


JavaScript 为 比较 字符 串 提 供 了 很 多 方法 。 其 中 ，indexo0f 方法 用 于 在 
字符 串 中 寻找 子 字 符 串 的 位 置 : 


string.indexof(substring) 


这 个 方法 返回 了 于 字符 串 第 一 次 出 现 的 位 置 。 我 们 在 这 里 只 想 知 道 茶 个 
字符 串 是 否 个 包含 在 男 一 个 子 符 串 里 面 ， 是 否 古 当前 URL 里 的 链接 
URL 。 


currenturl.indexof (linkurl) 


如 有 果 没 有 匹配 到 ，indexo0f 方法 将 返回 -1。 如 有 果 返 回 其 他 值 ， 则 表示 
有 匹配 。 如 采 index0f 方法 不 返回 -1， 那 么 就 可 以 前 进 到 函数 的 最 后 
一 步 了 : 


if (window.location,.href,indexof(JLinkur]l) != -1) { 


此 时 的 链接 一 定 是 指 癌 当前 页 面 的 链接 ， 因 此 吏 给 它 添 加 here 类 : 


links[i].className = "here"; 


剩 下 的 代码 就 是 关闭 语句 、 关 闭 for 循环 和 关闭 function 定义 的 
花 括 号 了 。 最 后 ， 使 用 addLoadEvent 函数 调用 highlightPage 。 


function highlightPage() { 
If (!document.getElementsByTagName) return false.; 
if (!document.getElementById) return false; 
var headers = document .getElementsByTagName( 'header'); 
If (headers.length == 0) return false,; 
var navs = headers[0].getElementsByTagName( 'nav ' ); 
if (navs.length == 0) return false; 
var links = navs[0].getElementsByTagName("a"); 
for (var i=0; i<links.length; i++) { 
Var linkurl; 
for (var i=0; i<links.length; i++) { 
linkurl] = links[i].getAttribute("href"); 
If (window.location.href.indexOof(linkurl) != -1) { 
links[i].className = "here",; 


} 
} 
addLoadEvent (highlightPage); 


保存 包含 这 个 函数 的 global .js 文件 。 刷 新 jndex .html 之 后 ， 你 
就 会 看 到 Home 链 接 突出 显示 了 ， 如 图 12-8 所 示 。 
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图 12-8 
利用 highlightPage 函数 ， 还 可 以 达到 一 箭 双 悦 的 目的 。 


通过 给 每 个 页 面 的 body 元 素 添加 id 属性 ， 可 以 为 每 个 页 面 应 用 不 同 
的 样式 。 为 了 给 每 个 页 面 添加 独特 的 id 属性 ， 可 以 取得 并 使 用 当前 链 
接 〈 即 添加 here 类 的 链接 ) 中 的 文本 。 但 需要 使 用 JavaScript 的 
toLowerCase 方法 把 该 文本 转换 成 小 写 形式 : 


var linktext = links[i].lastcChild.nodeValue.toLowerCase(); 


这 样 束 取 得 了 当前 链接 最 后 一 个 于 元 聚 的 值 ， 也 整 古 链接 的 文本 ， 然 
后 把 它 转换 成 小 写 形式 。 如 果 链 接 中 的 文本 是 “Home”， 那 么 
linktext 变量 中 保存 的 值 就 是 "home" 。 通 过 下 面 的 语句 就 可 以 把 
这 个 变量 的 值 设 置 为 body 元 素 的 id 属性 了 : 


document .body.setAttribute("id",1inktext); 


这 条 语句 就 相当 于 在 <body> 标签 中 添加 了 id="home" 。 


现在 的 highlightPage 函数 如 下 所 示 : 


function highlightPage( href ) { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
var headers = document .getElementsByTagName('header'); 
if (headers.length == 0) return false; 
var navs = headers[0].getElementsByTagName( 'nav ' ) ; 
if (navs.length == 0) return false; 
var links = navs[0].getElementsByTagName("a"); 
Var linkuril; 
for (var i=0; i<links.length; i++) { 
linkurl] = links[i].getAttribute("href"); 
If (window.location.href.indexOof(linkurl) != -1) { 
links[i].className = "here",; 
var linktext = links[i].lastcChild.nodeValue.toLowerCase(); 
document .body.setAttribute("id",1inktext); 


} 


} 
} 
addLoadEvent (highlightPage); 


于 是 ，index .html 文件 的 body 元 素 就 会 有 一 个 值 为 "home" 的 id 
，about .html 文件 中 的 id 就 是 "about" ，photos .html 文件 中 
的 id 将 是 "photos" ， 依 次 类 推 。 


新 加 入 的 这 些 标识 符 都 可 以 成 为 CS$ 中 的 挂钩 。 例 如 ， 可 以 利用 这 些 
id 为 不 同 页 面 的 头 部 应 用 不 同 的 育 景 图 像 。 


接 下 来 为 每 个 页 面 制作 一 幅 图 像 ， 大 小 为 250x250px。 也 可 以 使 用 我 已 
经 做 好 的 : lineup.gif 、basshead.gif 、bassist.gif 和 
drummer .gif ， 把 它们 都 放 到 images 文件 夹 中。 

然后 融 可 以 更 新 layout .css 文件 ,添加 background-image 声 
明 : 


#about header { 
background-image: ../images/lineup.gif); 


} 
#photos header { 
background-image: ../images/basshead.gif); 


#1live header { 
background-image: ../images/bassist .gif); 


#contact header { 
background-image: ../images/drummer .gif); 


如 此 一 来 ， 每 个 页 面 的 头 部 就 会 应 用 不 同 的 背景 图 像 了 。 
12.5.2 ” JavaScript 幻灯 片 
主页 还 需要 美化 一 下 。 上 毕竟 ， 大 多 数 访客 都 要 先 访问 主页 ， 在 其 中 添 


加 一 些 炫 酯 功能 是 非常 有 必要 的 。 第 10 章 讨论 的 JavaScript 约 灯 上 用 在 
这 里 下 合适 


在 "intro" 那 一 段 文字 中 ， 有 指 同 站 点 其 他 页 面 的 所 有 链接 。 如 采 在 
访客 把 鼠标 放 到 相应 链接 上 的 时 候 ， 能 够 让 他 们 得 到 有 关 页 面 的 一 点 
信息 应 该 不 错 。 在 这 里 ， 可 以 显示 相应 页 面 头 部 图 像 的 缩小 版 。 


把 每 一 幅 图 像 缩小 为 150x150px， 然 后 合并 为 750px 长 的 一 张 图 ， 命 名 
为 S1ideshow,.gif。 把 这 张 图 放 在 images 文件 夹 中 。 


组 合 后 的 图 像 如 图 12-9 所 示 。 


图 12-9 


为 了 实现 幻灯 片 功能 ， 需 要 更 新 global ,js 文件 。 先 把 第 10 章 中 定义 
的 moveElement 函数 复制 过 来 : 


function moveElement(elementID,final x,final y,interval) { 
if (!document.getElementById) return false; 
if (!document.getElementById(elementID)) return false; 
var elem = document.getElementById(elementID); 
if (elem.movement) { 
clearTimeout(elem.movement); 


} 
if (!elem.style.left) { 
elem.style.left = "QOpx"; 


} 
If (lelem.style.top) { 
elem.style.top = "QOpx"; 


Var xpos = parseIint(elem.style.1left); 

var ypos = parseIint(elem.style.top); 

if (xpos == final x && ypos == final y) { 
return true; 


if (xpos < final x) { 
var dist = Math.ceil((final x - xpos)/10); 
xpos = xpos + dist; 


} 


if (xpos > final x) { 
var dist = Math.ceil((xpos - final x)/10); 
xpos = xpos - dist; 

} 

If (ypos < final y) { 
var dist = Math.ceil((final y - ypos)/10); 
ypos = ypos + dist,; 


If (ypos > final y) { 
var dist = Math.ceil((ypos - final y)/10); 
ypos = ypos - dist; 


elem.style.left = xpos + "px"; 

elem.style.top = ypos + "px"; 

var repeat = 
"moveElement('"+elementID+"',"+final x+","+final y+","+interval+")" 


和 


elem.movement = setTimeout(repeat,interval); 


现在 应 该 创建 和 4] 灯 片 元 素 并 准备 相应 链接 了 。 在 此 ， 我 们 把 幻灯 片 直 
接 放 在 文档 中 的 "intro" 段落 后 面 。 


function prepareSlideshow() { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("intro")) return false; 
var intro = document.getElementById("intro"); 
var slideshow = document.createElement("div"); 
slideshow.setAttribute("id","slideshow"); 


var preview = document.createElement("img"); 
preview.setAttribute("src","images/slideshow.gif"); 
preview.setAttribute("alt","a glimpse of what awaits you"); 
preview,.setAttribute("id","preview"); 
slideshow.appendCchild(preview); 
insertAfter(slideshow,intro); 


接着 循环 遍历 "intro" 段落 中 的 所 有 链接 ， 并 根据 当前 鼠标 所 在 的 链 
接 来 移动 preview 元 素 。 比 如 说 ， 如 果 链 接 的 href 值 中 包含 字符 
串 "about .htm1" ， 就 把 preview 元 素 移 动 到 -150px 的 位 置 上 ， 如 果 
链接 的 href 值 中 包含 字符 串 "photos .html" ， 就 把 preview 元 素 
移动 到 -300px 的 位 置 上 ， 依 次 类 推 。 


为 了 让 动画 效果 看 起 来 很 汕 ， 给 moveElement 函数 传 入 仅 为 5 毫秒 的 


interval 值 : 


var links = intro.getElementsByTagName("a"); 
var destination; 
for (var i=0; i<links.length; i++) { 
links[i].onmouseover = function() { 
destination = this.getAttribute("href"); 
if (destination.indexOof("index.html") != -1) { 
moveElement ("preview",0,0,5); 


} 
if (destination.indexof("about.html") != -1) { 
moveElement ("preview", -150, 0,5); 


} 
if (destination.indexof("photos ,htm1") != -1) { 


moveEJLement("preview",， -300,0,5); 


} 
if (destination.indexof("live.html") != -1) { 
moveElement ("preview", -450, 0,5); 


} 
if (destination.indexof("contact.html") != -1) { 
moveElement ("preview", -600,0,5); 


还 要 通过 addLoadEvent 调用 这 个 函数 : 


addLoadEvent (prepareSlideshow); 


保存 global.js 文件 。 
当然 ， 还 得 更 新 样式 ， 在 layout .css 中 添加 如 下 声明 : 


#slideshow { 
width: 150px; 
height: 150px; 
position: relative,; 
overflow: hidden; 


} 


#preview { 
position: absolute; 
border -width: 090; 
outline-width: 09; 


} 


在 浏览 器 中 刷新 ijndex.html ， 试 一 试 幻灯 片 的 效果 。 


看 起 来 还 不 错 。 要 是 把 动画 效果 放 到 一 个 小 窗口 里 ， 就 更 完美 了 。 


创建 一 幅 150x150px 的 图 像 ， 它 的 绝 大 部 分 都 透明 ， 只 有 四 个 圆 角 是 与 
颜色 相同 的 。 把 它 命 名 为 frame .gif 并 保存 在 images 文件 


把 下 列 代 码 添加 到 global .js 中 的 prepareSlideshow 函数 中 ， 放 
到 创建 sl1ideshow 元 素 的 代码 后 面 : 


var frame = document.createElement("img"); 
frame.setAttribute("src","images/frame.gif"),; 
frame.setAttribute("alt",""); 


frame.setAttribute("id","frame"); 
slideshow.appendchild(frame); 


为 保证 这 个 小 窗口 出 现在 动画 之 上 ， 还 要 在 layout .css 中 加 入 如 下 
代码 : 


#frame { 
position: absolute; 
top: 0) 


left: 0; 
z-index: 99; 


刷新 index .html ， 再 试 坛 幻灯 片 效 果 ， 现 在 图 像 应 该 会 出 现在 小 窗 
口 里 面 了 。 


目前 ， 访 客 的 鼠标 放 到 "intro" 段落 中 的 链接 上 时 会 触发 幻灯 瞩 动 
画 。 如 琳 想 让 导航 div 中 的 链接 也 能 触发 幻灯 片 ， 可 以 把 下 面 这 行 代 


码 : 


var links intro.getElementsByTagName("a"); 


改 为 : 


var links document .getElementsByTagName("a"); 


完成 后 的 prepareSlideshow 函数 如 下 所 示 : 


function prepareSlideshow() { 

if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("intro")) return false; 
var intro = document.getElementById("intro"); 
var slideshow = document.createElement("div"); 
slideshow.setAttribute("id","slideshow"); 
var frame = document.createElement("img"); 
frame.setAttribute("src","images/frame.gif"); 
frame.setAttribute("alt",""); 
frame.setAttribute("id","frame"); 
slideshow.appendchild(franme); 
var preview = document.createElement("img"); 
preview,.setAttribute("src","images/slideshow.gif"); 
preview.setAttribute("alt","a glimpse of what awaits you"); 
preview.setAttribute("id","preview"); 
slideshow.appendCchild(preview); 
insertAfter(slideshow,intro); 
var links = document.getElementsByTagName("a"); 
var destination; 
for (var i=0; i<links.length; i++) { 

links[i].onmouseover = function() { 

destination = this.getAttribute("href"); 
if (destination.indexOof("index.html") != -1) { 
moveElement ("preview",0,0,5); 


} 
if (destination.indexof("about.html") != -1) { 
moveElement ("preview", -150, 0,5); 


} 
if (destination.indexof("photos ,htm1") != -1) { 
moveElement ("preview", -300,0,5); 


} 


if (destination.indexof("live.html") != -1) { 
moveElement ("preview", -450, 0,5); 


if (destination.indexof("contact.html") != -1) { 
moveElement ("preview", -600,0,5); 
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12.5.3 ”内 部 导航 


站 点 中 的 下 一 页 是 About 页 面 。 在 about .html 的 <article> 元 素 中 
添加 如 下 标记 : 


<h1i>About the band</h1> 
<nav> 
<ul> 
<]1i><a href="#jay">Jay Skript</a></1i> 
<]li><a href="#domsters">The Domsters</a></1i> 
</ul> 
</nav> 
<section id="jay"> 
<h2>Jay Skript</h2> 
<p>Jay Skript is going to rock your world!</p> 
<p>Together with his compatriots the Domsters, 
Jay is set for world domination. Just you wait and see.</p> 
<p>Jay Skript has been on the Scene Since the mid 1990s. 
His talent hasn't always been recognized or fully appreciated. 
In the early days, he was often unfavorably compared to bigger, 
similarly named artists. That's all in the past now.</p> 
</section> 
<section id="domsters"> 
<h2>The Domsters</h2> 
<p>The Domsters have been around, in one form or another, 
for almost as long. It's only in the past few years that the 
Domsters 
have settled down to their current, stable lineup. 
Now they're a rock-solid bunch: methodical and dependable.</p> 
</section> 


然后 ，About 页 面 如 图 12-11 所 示 。 
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似乎 还 可 以 ,但 就 是 页 面 有 点 长 了 。 知 道 为 什么 <nav> 元 素 中 包含 内 
部 链接 吗 ? 就 是 为 了 解决 这 个 问题 。 单 击 <nav> 中 的 每 个 链接 ， 都 会 
跳 到 带 有 相应 id 属性 的 <section>。 


而 使 用 JavaScript 和 DOM， 还 可 以 选择 性 地 每 次 只 显示 其 中 一 个 部 分 
(section) 。 把 下 面 这 个 函数 添加 到 global .js 中 ， 它 能 够 根据 指定 
的 id 显示 相应 的 <section> ， 同 时 隐藏 其 他 部 分 : 


function showSection(id) { 
var sections = document.getElementsByTagName("section"); 
for (var i=0; i<sections,.length; I++ ) { 


if (sections[i].getAttribute("id") != id) { 
sections[i].style.display = "none"; 

} else { 
sections[i].style.display = "block"; 


这 个 showSection 函数 的 用 途 是 修改 每 个 部 分 的 display 样式 属 

性 。 除 了 与 作为 参数 传 入 的 id 对 应 的 部 分 ， 其 他 部 分 的 display 属 
性 都 将 被 设置 为 "none" ， 而 与 传 入 id 对 应 的 那个 部 分 的 display 属 
性 则 被 设置 为 "block" 。 


然后 ， 还 需要 在 <article> 中 的 <nav> 所 包含 的 链接 被 单 击 时 调用 
showSection 函数 。 


创建 一 个 名 为 prepareInternalnav 的 函数 ， 先 从 循环 遍历 
<article> 中 的 <nav> 所 包含 的 链接 开始 : 


function prepareInternalnav() { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
var articles = document.getElementsByTagName("article"); 
if (articles.length == 0) return false; 


var navs = articles[0] .getElementsByTagName("nav"); 
If (navs.length == 0) return false.; 

var nav = navs[0]; 

var links = nav.getElementsByTagName("a"); 

for (var i=0; i<links.length; I++ ) { 


每 个 链接 的 href 属性 中 都 包含 对 应 部 分 的 1d ， 开 头 的 “#" 表 示 内 部 链 
接 。 要 提取 每 一 部 分 的 1d 值 ， 可 以 使 用 split 方法 。 这 是 根据 分 隔 符 
把 一 个 字符 串 分 成 两 或 多 部 分 的 一 种 便捷 方式 : 


array = string.split(character) 


这 里 ， 我 们 想 雪 的 是 "#" 后 面 的 字符 串 ， 因 此 可 以 以 "#" 为 分 隔 符 ， 得 到 
的 数组 中 包含 两 个 元 素 : 第 一 个 元 素 是 “提前 面 的 所 有 字符 (在 此 是 空 


字符 串 ) ， 第 二 个 元 素 则 是 后 面 的 所 有 字符 。 还 记得 吧 ， 数 组 中 第 一 
个 元 素 的 索引 是 0， 而 我 们 想 要 的 是 数组 中 的 第 二 个 元 素 ， 它 的 索引 古 
1 。 


var sectionId = links[i].getAttribute("href").split("#")[1]; 


以 把 “#* 后 面 的 字符 串 提 取出 来 并 保存 到 sectionId 变量 


再 添加 一 个 简单 的 测试 ， 确 保 真 的 存在 带 有 相应 id 的 元 素 。 如 果 不 存 
在 ， 则 继续 下 一 次 循环 。 


if (!document.getElementById(sectionId)) continue 


在 页 面 加 载 后 ， 需 要 默认 隐藏 所 有 部 分 。 下 面 这 行 代码 可 以 解决 问 
直 


题 : 


document .getElementById(sectionId).style.display = "none"; 


接 下 来 可 以 给 链接 添加 onclick 事件 处 理 函 数 ， 以 便 链 接 被 单 击 后 ， 


为 变量 sectionId 是 一 个 局 部 变量 ， 它 只 有 在 
prepareInternalnav 函数 执行 期 间 存 在 ， 等 到 了 事件 处 理 函 数 执 
行 的 时 候 它 就 不 存在 了 。 


要 解决 这 个 问题 ， 可 以 为 每 个 链接 创建 一 个 自 定义 的 属性 。 比 如 把 这 
个 属性 命名 为 destination ， 然 后 把 sectionId 的 值 赋 给 它 : 


links[i].destination = sectionId; 


这 个 属性 的 作用 域 是 持久 存在 的 。 回 头 ， 我 们 可 以 在 事件 处 理 函 效 中 
再 查询 这 个 属性 : 


links[i].onclick = function() { 
showSection(this.destination); 


return false; 


} 


为 prepareInternalnav 函数 加 上 几 个 伦 括 号 ， 结 束 它 的 定义 。 再 
通过 addLoadEvent 范 数 调 用 它 : 


addLoadEvent (prepareInternalnav); 


以 下 是 global .js 中 的 prepareInternalnav 函数 : 


function prepareInternalnav() { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
var articles = document.getElementsByTagName("article"); 
If (articles.length == 0) return false; 
var navs = articles[0].getElementsByTagName("nav"); 
If (navs.length == 0) return false; 
var nav = navs[0]; 
var links = nav.getElementsByTagName("a"); 
for (var i=0; i<links.length; I++ ) { 
var sectionId = links[i].getAttribute("href").split("#")[1]; 


if (!document.getElementById(sectionId)) continue; 
document .getElementById(sectionId).style.display = "none"; 
links[i].destination = sectionId; 
links[i].onclick = function() { 
showSection(this.destination); 
return false; 


addLoadEvent (prepareInternalnav); 


在 浏览 右 中 打开 about .html ， 测 试 一 下 刚才 实现 的 功能 。 单 击 一 个 
内 部 链接 ， 应 该 只 会 显示 相关 的 部 分 。 图 12-12 只 是 显示 了 一 个 部 分 的 
Abonut 页 面 。 
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页 面 越 长 ， 这 个 功能 的 效 末 束 越 明 显 。 例 如 ， 要 是 有 一 个 第 见 问 题 页 
面 ， 那 么 每 个 问题 都 可 以 作为 内 部 链接 来 处 理 。 而 单 击 一 个 问题 ， 融 
会 显示 出 与 该 问题 对 应 的 答案 ， 与 此 同时 其 他 问题 的 答案 并 不 显示 。 


12.5.4 ， JavaScript 图 片 库 


接 下 来 我 们 来 制作 photos .html ， 这 个 页 面 是 使 用 JavaScript 构 建 图 
片 库 的 理想 之 所 。 


客户 提供 了 Jay Skript 和 Domsters 演 出 的 四 张 上 照片 ， 大 小 为 400x300px: 


concert.jpg 
bassist.jpg 
guitarist.]jpg 
crowd ,jpg 


在 images 文件 夹 里 创建 一 个 名 为 photos 的 文件 夹 ， 把 这 四 张 照片 放 
到 里 面 。 再 为 每 张 照片 分 别 创建 100x100px 的 缩 略图 : 


thumbnail concert.jpg 
thumbnail bassist,jpg 
thumbnail guitarist, jpg 
thumbnail_ crowd.jpg 


把 这 些 照片 也 放 在 photos 文件 夹 中 。 


创建 一 组 链接 ， 指 向 全 尺寸 照 请。 为 这 个 列表 指定 村 d 
为 "imagegalery"。 在 每 个 链接 中 添加 一 个 <Iimg> 标签 ， 各 个 标签 
的 src 属性 分 别 指向 不 同 的 缩 略 图 。 


<h1>Photos of the band</h1> 
<ul id="imagegallery"> 
<1i> 
<a href="images/photos/concert.jpg" title="The crowd goes 
wild"> 
<img src="images/photos/thumbnail_ concert.jpg" alt="the band 
in concert" /> 
</a> 
</1i> 
<]i> 
<a href="images/photos/bassist.jpg" title="An atmospheric 
moment"> 
<img src="images/photos/thumbnail_ bassist.jpg" alt="the 
bassist" /> 


</a> 


</1i> 
<]i> 
<a href="images/photos/guitarist.jpg" title="Rocking out"> 
<img src="images/photos/thumbnail _ guitarist.jpg" alt="the 
guitarist" /> 
</a> 
</1i> 
<]i> 
<a href="images/photos/crowd.jpg" title="Encore! Encore!"> 
<img src="images/photos/thumbnail_ crowd.jpg" alt="the 
audience" /> 
</a> 
</1i> 
</Uul> 


把 这 组 链接 放 到 photos .html 的 <article> 元 素 中 。 
更 新 layout .css 文件 ， 让 缩 略 几 片 从 垂直 排列 变 成 水 平 排列 (如 图 
12-13 所 示 ) 。 


#imagegallery 1i { 
display: inline; 
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为 了 让 图 片 库 的 脚本 正常 运行 ， 还 需要 再 制作 一 个 占 位 符 图 片 。 把 这 
个 图 片 命名 为 placeholder ,gif 并 放 到 images 文件 夹 中 。 


接 下 来 就 可 以 把 第 6 章 和 第 7 章 编写 的 图 片 库 脚本 放 到 scripts 文件 夹 
的 gLlobal, js 文件 中 。 


function showPic(whichpic) { 


} 


if (!document.getElementById("placeholder")) return true; 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder.setAttribute("src",source); 
if (!document.getElementById("description")) return false; 
if (whichpic.getAttribute("title")) { 
Var text = whichpic.getAttribute("title"); 
} else { 
Var text = "",; 
} 
var description = document.getElementById("description"); 
if (description.firstChild.nodeType == 3) { 
description,.firstCchild,nodevalue = text; 


return false; 


function preparePlaceholder() { 


} 


if (!document.createElement) return false; 

if (!document.createTextNode) return false; 

if (!document.getElementById) return false; 

if (!document.getElementById("imagegallery")) return false; 
var placeholder = document.createElement("img"); 
placeholder.setAttribute("id","placeholder"); 
placeholder.setAttribute("src","images/placeholder .gif"); 
placeholder.setAttribute("alt", "my image gallery"); 

var description = document.createElement("p"); 
description.setAttribute("id","description"); 

var desctext = document.createTextNode("Choose an image"); 
description.appendCchild(desctext); 

var gallery = document .getElementById("imagegallery"); 
insertAfter(description,gallery); 
insertAfter(placeholder,description); 


function prepareGallery() { 


if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery")) return false; 
var gallery = document .getElementById("imagegallery"); 
var links = gallery.getElementsByTagName("a"); 
for ( var i=0; i < links.length; i++) { 

links[i].onclick = function() { 

return showpic(this); 


addLoadEvent (preparePlaceholder); 


addLoadEvent (prepareGallery ) ， 


只 有 一 处 微小 的 变化 : description 中 的 文本 被 放 到 了 
placeholder 图 像 的 上 方 。 


在 浏览 器 中 打开 photos.html ， 试 验 一 下 效果 (如 图 12-14 所 示 ) 。 
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12.5.5 ”增强 表格 


客户 给 我 们 提供 了 Jay Skript 和 Domsters 的 巡演 日 程 。 每 场 演 出 ， 都 有 一 
个 日 期 (date) 一 个 城市 〈city) 和 一 个 地 点 (venue) 。 显 然 ， 这 是 
表 列 数据 。 因 此 ，Live 页 面 应 该 包含 一 个 这 演 表 格 。 


<h1>Tour dates</h1> 
<table summary="when and where you can see the band"> 
<thead> 
<tr> 
<th>Date</th> 
<th>City</th> 
<th>Venue</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>June 9th</td> 
<td>Portland, <abbr title="Oregon">OR</abbr></td> 
<td>Crystal Ballroom</td> 
</tr> 


<tr> 


<td>June 10th</td> 
<td>Seattle, <abbr title="Washington">wA</abbr></td> 
<td>Crocodile Cafe</td> 

</tr> 

<tr> 
<td>June 12th</td> 
<td>Sacramento, <abbr title="California">CcA</abbr></td> 
<td>Torch Club</td> 

</tr> 

<tr> 
<td>June 17th</td> 
<td>Austin, <abbr title="Texas">TX</abbr></td> 
<td>Speakeasy</td> 

</tr> 

</tbody> 

</table> 


把 这 个 <table> 放 到 1ive ,html 中 的 <article> 元 素 内 。 
接着 再 在 layout .css 中 为 表格 中 的 单元 格 应 用 一 些 样式 : 


td { 
padding: .5em 3em; 


更 新 color .css ， 为 表 头 和 表格 选 定 指 定 颜色 : 


th { 
color: #edc 
background-color: #455; 


} 
tr td { 


color: #223; 
background-color: #eb6; 


} 


在 浏览 器 中 打开 live .html 后 ， 可 以 看 到 一 个 普 普 通通 、 丝 可 没有 应 
用 什么 脚本 的 表格 (如 图 12-15 所 示 ) 。 
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此 时 ， 正 好 可 以 把 第 9 章 定义 的 表格 样式 化 的 函数 stripeTables 及 
high1ightRows 拿 过 来 使 用 。 还 可 以 把 第 8 章 的 
displayAbbreviations 函数 借用 过 来 。 


把 这 几 个 函数 全 都 添加 到 global .js 文件 中 ， 并 通过 addLoadEvent 
调用 它们 : 


function stripeTables() { 
if (!document.getElementsByTagName) return false; 
var tables = document.getElementsByTagName("table"); 
for (var i=0; i<tables.length; i++) { 
var odd = false; 
var rows = tables[i].getElementsByTagName("tr"); 
for (var j=0; j<rows.length; j++) { 
if (odd == true) { 
addClass(rows[j],"odd"); 
odd = false; 
} else { 
odd = true; 


function highlightRows() { 
if(!document.getElementsByTagName) return false; 
var rows = document.getElementsByTagName("tr"); 
for (var i=0; i<rows.length; i++) { 
rows[i].oldClassName = rows[i].className 
rows[i].onmouseover = function() { 
addclass(this,"highlight"); 


rows[i].onmouseout = function() { 
this.className = this.oldClassName 


} 
} 
} 
function displayAbbreviations() { 
if (!document.getElementsByTagName || !document.createElement 
= || !document.createTextNode) return false; 


var abbreviations = document.getElementsByTagName("abbr"); 
if (abbreviations.length < 1) return false; 
var defs = new Array(); 
for (var i=0; i<abbreviations.length; i++) { 
var current_abbr = abbreviations[i]; 


if (current_abbr,.childNodes,.Jength < 1) continue 
var definition = current_abbr.getAttribute("title"); 
var key = current_abbr.lastchild.nodeValue; 
defs[key] = definition; 


var dlist = document.createElement("d1"); 

for (key in defs) { 
var definition = defs[key]; 
var dtitle = document.createElement("dt"); 
var dtitle text = document.createTextNode(key); 
dtitle.appendchild(dtitle_ text); 
var ddesc = document.createElement("dd"); 
var ddesc_ text = document.createTextNode(definition); 
ddesc.appendChild(ddesc_text ); 
dlist.appendChild(dtitle); 
dlist.appendChild(ddesc); 


} 

if (dlist.childNodes.length < 1) return false; 

var header = document.createElement("h3"); 

var header_text = document.createTextNode("Abbreviations"); 
header .appendChild(header_text); 

var articles = document.getElementsByTagName("article"); 
if (articles.length == 0) return false; 

var container = articles[0]; 
container.appendcChild(header ); 
container.appendCchild(dlist); 


} 


addLoadEvent(stripeTables); 
addLoadEvent (highlightRows); 
addLoadEvent (displayAbbreviations); 


在 此 ，highlightRows 和 displayAbbreviations 函数 都 稍 有 改 
动 。 


。highlightRows : 没有 像 以 前 那样 直接 应 用 样式 属性 ， 而 是 使 


用 addclass 函数 添 加 了 highlight 类 。 这 个 类 会 在 用 户 鼠 标 悬 停 在 
表格 行 上 的 时 候 应 用 。 在 应 用 新 类 名 之 前 ， 先 把 原来 的 
className 保存 到 名 为 oldClassName 的 自 定义 属性 中 。 当 用 
户 的 鼠标 离开 表格 行 之 后 ， 再 把 className 属性 重 置 回 原来 的 
oldClassName 值 。 

。displayAbbreviations : 修改 了 最 后 几 行 代码 ， 因 为 这 里 要 
找 的 是 article 元 素 ， 而 不 是 第 8 章 id 为 content 的 div 元 
素 。 


这 两 处 修改 也 提醒 我 们 ， 以 前 定义 的 函数 仍然 需要 进一步 抽象 。 比 如 
说 ， 可 以 为 displayAbbreviations 函数 再 增加 一 个 参数 ， 以 便 指 
明 把 新 创建 的 列表 添加 到 哪个 元 素 中 。 


还 要 更 新 layout ,css ， 再 添加 一 些 样式 : 


overflow: hidden， 


{ 
float: left; 


{ 
float: left; 


再 更 新 typography .css : 


margin-right: iem; 


margin-right: 3em; 


最 后 ， 在 color .css 中 为 odd 和 highlight 类 添加 颜色 样式 : 


tr.odd td { 
color: #223; 
background-color: #ec8; 


} 

tr.highlight td { 
color: #223; 
background-color: #cba; 


在 浏览 三 中 打开 1ive .htm1 ， 看 一 看 增强 之 后 的 <table> 吧 。 此 
时 ， 侦 数 行 都 会 有 一 个 odd 类 (如 图 12-16 所 示 ) 。 
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12.5.6 ”增强 表单 


还 得 为 这 个 站 点 制作 一 个 很 重要 的 页 面 ， 这 个 页 面 能 够 让 乐队 的 粉丝 
们 跟 乐 手 沟通 。 


想 一 想 ， 差 不 多 任何 网 站 都 会 公布 一 些 联系 信息 ， 哪 介 只 十 一 个 电子 
邮件 地 址 。 对 眼下 这 个 网 站 来 说 ， 你 打算 构建 一 个 联系 表单 。 


联系 表单 ， 和 其 他 任何 类 型 的 表单 一 样 ， 都 需要 某 种 服务 器 端 技 术 来 
进一步 验证 并 把 数据 保存 到 后 台数 据 库 或 系统 中 。Perl、PHP、ASP 以 
及 其 他 服务 器 端 编程 语言 都 是 可 选 的 技术 。 但 我 们 这 个 例子 不 会 涉及 
服务 器 端 脚本 ， 而 是 会 创建 一 个 极为 普 回访 客 显示 感 
谢 信 息 。 访 客 填 充 的 信息 也 不 会 发 送 到 哪 去 ( 别 志 了 ， 乐 队 是 我 们 虚 


构 的 ) 。 假 如 真有 这 么 一 个 网 站 ， 就 必须 得 有 服务 器 端 脚本 来 处 理 用 
尸 提 交 的 数据 ， 把 它们 保存 到 数据 库 中 ， 或 者 通过 邮件 转发 给 适当 的 
人 ， 然 后 才 显 示 感 谢 信 息 。 


创建 一 个 文件 ， 命 名 为 contact .html ， 当 然 这 个 文件 要 基于 
template.html 来 创建 ， 只 不 过 <article> 中 要 包含 一 个 <form> 


<h1>Contact the band</h1> 
<form method="post" action="Ssubmit ,htm1L "> 
<fieldset> 
<p> 
<label for="name">Name:</label> 
<input type="text" id="name" name="name" 
= placeholder="Your name" required="required" /> 
</p> 
<p> 
<label for="email">Email:</label> 
<input type="email" id="email" name="email" 
=» placeholder="Your email address" required="required" /> 
</p> 
<p> 
<label for="message">Message:</label> 
<textarea cols="45" rows="7" id="message" 
=» Name="message" required="required" 
=» placeholder="Write your message here."></textarea> 
</p> 
<input type="submit" value="Send" /> 
</fieldset> 
</form> 


更 新 layout ,css 文件 : 


label { 
display: block; 


} 
fieldset { 


border: 0; 


} 


这 样 ， 融 有 一 个 基本 的 联系 表单 ， 如 网 12-17 所 示 。 
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图 12-17 


接 下 来 ， 再 基于 template.html 创建 一 个 新 文件 ， 命 名 为 
submit.html 。 这 一 次 ，<article> 中 包含 了 感谢 信息 。 


<hi>Thanks!</h1> 
<p>Thanks for contacting us. We'll get back to you as soon as we 


can.</p> 


这 个 submit .html 页 面 中 只 包含 感谢 信息 ， 不 处 理 表 单 提交 的 信息 ， 
你 懂 的 (如 图 12-18 所 示 ) 。 


Jay Skript 
and the 
DOMSTERS 


Thanks for contacting us. We'l get back to you as soon as we can. 


图 12-18 
01. 字段 标签 


表单 中 有 三 个 字段 : name 、email 和 message 。 每 个 字段 都 有 
一 个 对 应 的 <label> 标签 。 


作为 增进 可 访问 性 的 元 素 ，label 非常 有 用 。 它 通过 for 属性 把 
一 小 段 文本 关联 到 表单 的 一 个 字段 。 对 于 屏幕 阅读 器 来 说 ， 标 签 
中 的 这 一 小 段 文本 几乎 是 不 可 或 缺 的 。 


即使 是 那些 视力 没有 任何 问题 的 人 ，1abel 元 素 同样 也 具有 不 可 
低估 的 价值 。 很 多 浏览 器 都 会 为 abel 元 素 添加 默认 行为 : 如 果 
label 中 的 文本 被 单 击 ， 关 联 的 表单 字段 就 会 获得 焦点 。 这 对 于 
增进 表单 的 可 用 性 是 很 有 帮助 的 。 然 而 ， 并 不 是 所 有 浏览 器 都 实 
现 了 该 行为 。 


02. 


可 能 上 述 行 为 在 默认 情况 下 古 不 存在 的 ， 但 我 们 为 何不 目 己 深 加 
这 种 行为 呢 ? 所 需 的 只 不 过 数 行 JavaScript 代 码 而 已 。 


(1) 取得 文档 中 的 label 元 素 。 
(2) 如 果 label 有 for 属性 ， 添 加 一 个 事件 处 理 函 数 。 


(3) 在 label 被 单 击 时 ， 提 取 for 属性 的 值 。 这 个 值 就 是 相应 表单 
字段 的 id 值 。 


(4) 确保 存在 相应 的 表单 字段 。 
(5) 让 相应 的 表单 字段 获得 焦点 。 


在 global .js 中 添加 函数 fFocusLabels ， 并 通过 
addLoadEvent 函数 在 页 面 加 载 时 执行 该 画 数 。 


function focusLabels() { 
if (!document.getElementsByTagName) return false; 
var labels = document.getElementsByTagName("label"); 
for (var i=0; i<labels.length; i++) { 
if (!labels[i].getAttribute("for")) continue; 
labels[i].onclick = function() { 
var id = this.getAttribute("for"); 
if (!document.getElementById(id)) return false; 
var element = document .getElementById(id); 
element .focus() ， 


} 


}a 
ddLoadEvent (focusLabels); 


在 浏览 器 中 加 载 contact .html 页 面 ， 单 击 一 个 标签 就 会 把 焦点 
转移 到 关联 的 表单 字段 中 。 也 许 访客 使 用 的 浏览 硕 不 文 持 这 个 行 
为 。 但 现在 不 一 样 了 ， 现 在 所 有 浏览 融 都 会 文 持 这 个 行为 。 


占 位 符 值 


我 们 注意 到 ， 联 系 表单 中 的 每 个 字段 都 通过 HTML5 的 
placeholder 属性 添加 了 占 位 符 文 本 ，name 字段 中 有 "your 


name" ，email 字段 中 有 "your email" ， 等 等 。 


注意 ”从 增进 可 访问 性 的 角度 说 ， 占 位 符 值 也 很 有 价值 。 
Web Accessibility Initiative 指 坝 的 10.4 廊 指出 ，“ 在 用 户 代 理 能 
够 正确 处 理 空 的 控件 之 前 ， 应 该 在 可 编辑 文本 框 和 文本 区 中 
添加 默认 的 、 占 位 字符 。[ 优 先 级 3]。” 要 了 解 有 关 Web 
Accessibility Initiative 的 更 多 信息 ， 请 访问 
http:/www.w3.0rg/ WAI/ ° 


过 去 ， 有 些 浏 贤 右 不 能 正确 识别 空 的 表单 子 段 ， 从 而 为 键 副 导航 
制造 了 麻烦 。 访 客 无 法 通过 按 Tab 刍 进入 空 字段 。 


与 <label> 标签 类 似 ， 增 强 可 访问 性 对 任何 人 来 说 部 是 一 件 好 
事 。 即 使 古 那 些 不 使 用 键盘 导航 的 人 ， 看 到 表 和 曲子 段 中 显示 着 近 
示 文 本 ， 也 会 觉得 非常 友好 。 


通过 HTML5 的 placeholder 属性 设置 据 位 符 值 有 一 个 缺点 ， 那 
瓯 是 使 用 旧版 本 浏览 器 的 用 户 看 不 到 字段 中 的 占 位 符 文 本 (字段 
仍然 是 空 的 ) 。 

使 用 JavaScript 可 以 保证 字段 中 始终 可 以 显示 提示 信息 。 不 过 ， 这 


一 次 我 们 不 再 使 用 DOM 核 心 的 方法 和 属性 ， 而 是 要 使 用 HTML 
DOM 中 最 常用 的 一 个 对 象 : form 对 象 。 


form 对 象 


有 读者 可 能 知道 ，HTML 文 档 中 的 每 个 元 素 都 是 一 个 对 象 。 
个 元 素 都 有 nodeName 、nodeType 之 类 的 DOM 属 性 。 


而 有 些 元 素 具 有 的 属性 比 DOM 核 心中 定义 的 还 要 多 。 文 档 中 
的 每 个 表单 元 素 都 是 一 个 form 对 象 ， 每 个 form 对 象 都 有 一 
个 elements.length 属性 。 这 个 属性 返回 表单 中 包含 的 表 
单元 素 的 个 数 : 


form.elements.1length 


这 个 返回 值 与 childNodes .1length 不 一 样 ， 后 者 返回 的 是 
元 素 中 包含 的 所 有 节点 的 个 数 。 而 form 对 象 的 
elements .length 属性 只 关注 那些 属于 表单 元 到 的 元 素 ， 


如 input 、textarea ， 等 等 。 


相应 地 ， 表 单 中 的 所 有 字段 都 保存 在 form 对 象 的 elements 
属性 中 。 也 就 是 说 ， 下 面 是 一 个 包含 所 有 表单 元 素 的 数组 : 


form.elements 


同样 ， 这 个 属性 与 childNodes 属性 也 不 一 样 ， 后 者 也 是 一 
个 数组 。childNodes 数组 返回 的 是 所 有 节点 ， 而 
elements 数组 则 只 返回 jnput 、select 、textarea 以 
及 其 他 表单 字段 。 


elements 数组 中 的 每 个 表单 元 闵 都 有 目 己 的 一 组 属性 。 比 
如 ，value 属性 中 保存 的 就 是 表单 元 素 的 当前 值 : 


element .Value 


这 行 代码 等 价 于 : 


element .getAttribute("value") 


包含 在 contact .html 中 的 每 个 表单 字段 都 有 一 个 初始 的 
placeholder 属性 。 你 可 以 取得 这 些 占 位 符 的 值 并 临时 将 它们 作 
为 相应 表单 字段 的 value 。 而 在 该 字段 获得 焦点 时 ， 再 删除 字段 
的 value 值 。 类 似 地 ， 如 果 用 户 并 没有 在 字段 中 输入 文本 且 离 开 
了 当前 字段 ， 那 么 再 重新 应 用 占 位 符 值 即 可 。 这 个 例子 与 第 11 章 
中 的 占 位 符 的 例子 是 类 似 的 。 


为 此 ， 你 需要 写 一 个 函数 ， 命 名 为 resetFields ， 它 只 接受 一 个 
form 对 象 作 为 参数 。 这 个 函数 执行 如 下 操作 。 


(1) 检查 浏览 器 是 否 支 持 placeholder 属性 。 如 果 不 支 持 ， 继 


Si 


(2) 循环 人 遍历 表单 中 的 每 个 元 素 。 
(3) 如 采 当 前 元 系 是 提交 按钮 ， 跳 过 


(4) 为 元 素 获得 焦点 的 事件 添加 一 个 处 理 画 数 。 如 果 字 段 的 值 等 于 
占 位 符 文本 ， 则 将 字段 的 值 设 置 为 空 。 


(5) 再 为 元 了 失去 焦点 的 事件 添加 一 个 处 理 画 数 。 如 果子 段 的 值 为 
至 ， 则 为 其 添加 占 位 符 值 。 


(6) 为 了 应 用 样式 ， 在 字段 显示 占 位 符 值 的 时 候 添加 
placeholder 类 。 


文 个 函数 的 定义 如 下 : 


function resetFields(whichform) { 
If (Modernizr.input.placeholder) return; 
for (var i=0; i<whichform.elements.1length; i++) { 
var element = whichform.elements[i]; 
if (element .type == "submit") continue; 
var check = element.placeholder || 
element.getAttribute('placeholder'); 
If (!check) continue; 
element.onfocus = function() { 
var text = this.placeholder || 
this.getAttribute('placeholder'); 
If (this.value == text) { 


this.className = ''， 
this.value = ""; 
} 
element.onblur = function() { 
If (this.value == "") { 
this.className = 'placeholder'; 


this.value = this.placeholder || 
this.getAttribute('placeholder'); 


} 


element .onblur(); 


} 


| | 
函数 中 用 到 了 两 个 事件 处 理 函 数 。 其 中 ，onfocus 事件 会 在 用 户 

通过 按 Tab 键 或 单 击 表单 字段 时 被 触发 ， 而 onbLur 事件 会 在 用 户 

把 焦点 移出 表单 字段 时 触发 。 男 外 ， 在 onblur 事件 定义 之 后 ， 立 
即 调用 了 它 ， 以 便 在 必要 时 应 用 占 位 符 值 。 


注意 ”鉴于 不 同 的 浏览 器 对 未 知 属性 的 实现 方式 有 所 不 同 ， 
这 里 同时 使 用 了 HTML DOM 的 splaceholder 属性 和 DOM 
的 getAttribute('placeholder' ) 方法 。 


把 resetFields 函数 添加 到 global ,js 文件 中 。 但 我 们 需要 为 
它 传 入 form 对 象 来 调用 它 。 再 编辑 一 个 函数 prepareForms ， 
循环 遍历 文档 中 的 所 有 form 对 象 ， 并 将 每 个 form 对 象 传 给 
resetFields 函数 。 


function prepareForms() { 
for (var i=0; i<document.forms.length; i++) { 
var thisform = document.forms[i]; 
resetFields(thisform); 


使 用 addLoadEvent 函数 来 调用 prepareForms 。 


addLoadEvent(prepareForms ) ; 


为 了 让 占 位 符 更 突出 一 点 ， 在 color ,css 文件 中 通过 
placeholder 类 修改 字段 的 闫 色 : 


input.placeholder { 
color: grey; 


03. 


在 不 支持 HTML5 的 浏览 器 中 刷新 contact .htm1 ， 看 看 
resetFields 函数 的 效果 如 何 。 你 会 看 到 resetFields 函数 起 
到 了 在 支持 HTML5 的 浏览 器 中 使 用 placeholder 属性 一 样 的 效 
Fm 


随便 单 击 儿 个 字段 ， 或 者 单 击 相应 的 标 人 等 试 一 坛 。 黑 认 值 应 该 消 
失 。 如 条 在 没有 输入 文本 的 情况 下 移动 到 另 一 个 字段 ， 委 认 值 应 
该 再 次 出 现 。 如 采 输 入 了 文本 ， 那 么 默认 值 束 不 应 该 再 出 现 了 。 


表单 验证 

围绕 联系 表单 的 下 一 个 任务 涉及 JavaScript 最 古老 的 用 途 8 

自从 JavaScript 逛 生 之 日 起 ， 客 户 端 表 单 验证 就 拉 开 了 序幕 。 想 法 
很 简单 ， 束 是 在 用 户 提交 表单 时 ， 对 提交 的 值 进 行 一 番 测 试 。 如 
果 必 填 字 段 留 室 ， 用 户 就 会 看 到 一 个 警告 框 ， 告 诉 他 哪个 字段 必 
须要 填写 内 容 。 


文 持 HTML5 的 浏 哎 器 终于 针对 一 些 子 段 实现 了 原生 的 表单 验证 。 
例如 ，Opera 10 可 以 目 动 验证 电子 邮件 字段 ， 如 图 12-19 所 示 。 


Email: 
Imyemailcom| 


myemail.com is 
not a legal email 
address 


图 12-19 


当 你 提交 包含 电子 邮件 输入 字段 的 表单 时 ，Opera 会 基于 RFC 定 义 
的 电子 邮件 格式 来 验证 用 户 的 输入 ， 而 且 启 不 启用 JavaScript 都 没 
有 关系 。HTML5 还 定义 了 其 他 类 型 的 字段 验证 ， 例 如 URL 输 入 字 
段 。 对 于 这 些 字段 而 言 ， 我 们 不 必 在 表单 中 添加 任何 额外 的 标 
记 ; 浏览 器 根据 输入 字段 的 类 型 就 可 以 完成 验证 。 


HTML5 也 提供 了 required 属性 ， 用 于 表示 某 个 字段 的 值 是 必须 
填写 不 能 留 空 的 ， 如 图 12-20 所 示 。Opera 10 同 样 支持 不 依赖 任何 
脚本 的 这 一 原生 特性 。 


Mame: 


You have to 
specify a value 


图 12-20 


对 于 文 持 HTML5 的 浏览 亏 而 言 ， 这 是 个 好 消息 。 但 对 于 客 尸 委托 
给 你 制作 的 这 个 乐队 网 站 来 将 ， 还 必须 再 有 灵活 一 点 ， 还 得 再 添加 
使 用 JavaScript 验 证 表单 的 功能 。 


使 用 JavaScript 进 行 表单 验证 昕 起 来 没有 什么 ， 而 且 通 常 也 确实 如 
此 。 但 如 果 JavaScript 难 证 脚本 写 得 不 好 ， 也 会 斋 来 负面 的 结果 。 
假如 代码 中 包含 错误 ， 最 终 可 能 会 导致 用 户 根本 无 法 提交 表单 。 


在 使 用 JavaScript 编 写 验 证 表单 的 脚本 时 ， 要 记 住 三 件 事 。 


。 验证 脚本 写 得 不 好 ， 反 而 不 如 没有 验证 。 

。 于 万 不 要 完全 依赖 JavaScript。 客 户 端 验证 并 不 能 取代 服务 器 
端的 验证 。 即 使 有 了 JavaScript 验 证 ， 服 务 器 端 照 样 还 应 该 对 
接收 到 的 数据 再 次 验证 。 

客户 站 验证 的 目的 在 于 帮助 用 户 填 好 表单 ， 避 免 他 们 提交 未 
完成 的 表单 ， 从 而 节省 他 们 的 时 间 。 服 务 器 端 验证 的 目的 在 
于 保护 数据 库 和 后 台 系 统 的 安全 。 

一 定 要 尽量 保证 难 证 过 程 尽 可 能 简单 。 开 始 的 时 候 ， 可 以 只 检查 
用 户 是 否 输入 了 什么 内 容 。 下 面 这 个 函数 ，isFilled ， 以 一 个 
表单 元 系 作 为 参数 : 


function isFilled(field) { 
if (field.value.replace(' ','').length == 0) return false; 
var placeholder = field.placeholder || 


field.getAttribute('placeholder'); 
return (field.value != placeholder); 


通过 检查 去 掉 空 格 之 后 的 value 属性 的 length 属性 ， 就 可 以 知 
道 value 中 是 否 没 有 任何 字符 (不 都 是 空格 ) 。 如 果 确 实 不 包含 
任何 字符 ， 画 数 返 回 false 。 否 则 ， 继 续 下 面 的 比较 。 


通过 比较 value 属性 与 placeholder 属性 ， 就 可 以 知道 用 户 是 
否 对 占 位 符 文本 一 字 未 动 。 如 果 两 个 相同 ， 函 数 返 回 false 。 如 
果 上 面 两 个 测试 都 通过 ， 说 明 用 户 已 经 在 字段 中 填写 了 内 容 ， 
isFilled 函数 就 会 返回 true 。 


接 下 来 一 个 类 似 的 函数 是 isEmail 。 这 个 函数 会 进行 非常 简略 的 
仿 得 ， 看 表单 字段 中 的 内 容 是 不 是 一 个 电子 邮件 地 址 。 


function isEmail(field) { 
return (field.value.indexOof("@") != -1 && 


field.value.indexof(".") != -1); 


这 个 函数 使 用 indexof 方法 执行 了 两 方面 测试 。 这 个 方法 用 于 在 
一 个 字符 串 中 查找 另 一 个 字符 串 第 一 次 出 现 的 位 置 。 如 有 果 要 搜索 
的 字符 串 存 在 ， 则 返回 该 字符 串 第 一 个 字符 所 在 的 位 置 。 如 果 没 
有 找到 要 搜索 的 字符 串 ， 则 返回 -1。 画 数 中 的 第 一 个 测试 在 表单 字 
段 的 value 属性 中 搜索 @ 和 从 号 。 这 是 电子 邮件 中 绝 不 能 少 的 一 个 
符号 。 如 果 没 有 找到 @，isEmail 函数 就 返回 false 。 第 二 个 测 
试 的 原理 相同 ， 只 不 过 搜索 的 是 句点 (.) 符号 。 如 果 在 表单 字段 
的 value 属性 中 没有 找到 这 个 字符 ， 那 么 函数 仍然 会 返回 false 
。 如 果 两 个 测试 都 通过 了 ，isEmail 函数 就 返回 true 。 


这 个 isEmail 函数 并 不 十 分 可 车。 如 采用 户 输入 了 一 个 仿造 的 电 
子 邮 件 地 址 ， 甚 至 根本 束 不 古 电子 邮件 地 址 的 字符 串 ， 验 证 也 有 


可 能 通过 。 但 是 ， 验 证 写 得 太 过 复杂 并 不 是 件 好 事 。 验 证 越 复 
并， 0 比如 ， 很 多 验证 电子 邮件 的 脚本 都 
错误 地 假设 电子 邮件 的 域名 只 能 是 三 个 字母 。 这 样 的 错误 假设 会 
导致 域名 为 .info、.name 之 类 的 邮件 就 不 能 通过 验证 。 


现在 ， 你 已 经 有 了 两 个 验证 函数 : i isEmail 。 但 你 
并 不 想 对 每 个 表单 字段 都 运行 它们 。 因 此 ， 还 需要 某 种 方式 来 指 
定 哪个 字段 是 必 填 的 ， 哪 个 字段 必须 输入 | 


在 HTML 标 记 中 ， 可 以 使 用 HTML5 的 required 属性 : 


<input type="text" id="name" name="name" value="Your name" 
required="required" /> 


<input type="email" id="email" name="email" value="Your email 
address" 
= required="required" /> 


注意 ”这 里 的 代码 使 用 了 required = "required", 而 

不 是 仅 指 定 一 个 没有 值 的 required 属性 。 在 HTML5 中 ， 这 
两 种 写法 都 是 有 效 的 ， 因 为 HTML5 兼 容 这 两 种 语法 。 尽 管 如 
此 ， 我 还 是 建议 读者 使 用 较为 严格 的 XHTML 语法 ， 也 就 是 说 
所 有 属性 都 要 赋值 ， 而 且 单 独 的 标签 要 添加 斜 枉 〈/) 。 


在 CSS 文 件 中 也 可 以 使 用 这 些 属性 。 例 如 ， 可 以 为 必 填 子 段 添加 粗 
一 些 的 边框 ， 或 者 应 用 一 种 不 同 的 育 景 颜 色 。 


同样 ， 在 JavaScript 中 也 可 以 使 用 这 些 属 性 。 下 面 我 们 编写 一 个 名 
为 ValidateForm 的 函数 。 这 个 函数 以 一 个 form 对 象 为 参数 ， 
并 执行 下 列 操作 。 

(1) 循环 仙 历 表单 的 elements 数组 。 


(2) 如 果 发 现 了 required 属性 ， 把 相应 的 元 素 传 递 给 ijsFilled 
函数 。 


(3) 如 果 isFilled 了 画 数 返回 false ， 显 示警 告 消息 ， 并 且 
validateForm 函数 也 返回 false。 


(4) 如 果 找 到 了 email 类 型 的 字段 ， 把 相应 的 元 素 传 递 给 IsEmail 
函数 。 


(5) 如 果 isEmail 函数 返回 false ， 显 示警 告 消 息 ， 并 且 
validateForm 函数 也 返回 false 。 


(6) 否则 ，validateForm 函数 返回 true 。 


下 面 就 是 完成 后 的 validateForm 画 数 : 


function validateForm(whichform) { 
for (var i=0; i<whichform.elements.length; i++) { 
var element = whichform.elements[i]; 
if (element.required == 'required') { 
if (!isFilled(element)) { 
alert("Please fill in the "+element.name+" field."); 
return false; 


} 


if (element.type == 'email') { 


if (!isEmail(element)) { 
alert("The "+element.name+" field must be a valid 
email] address."); 
return false; 


} 


return true; 


这 样 ， 只 要 在 表 早 被 提交 时 基于 表单 执行 validateForm 久 函数 束 
本 下: 为 此 ， 可 以 在 prepareForms 函数 中 通过 onsubmit 事 
件 处 理 函 数 来 添加 验证 行为 ; 


function prepareForms() { 
for (var i=0; 1I<document ,forms. Jength; I++) { 
var thisform = document.forms[i]; 
resetFields(thisform); 
thisform.onsubmit = function() { 
return validateForm(this); 


| 
无 论 什 么 时 候 提 交 表 单 ， 都 会 触发 Submit 事件 ， 而 事件 会 被 
onsubmit 事件 处 理 函 数 拦 截 。 执 行事 件 处 理 函 数 时 ， 会 将 表单 
传递 给 validateForm 函数 。 如 果 validateForm 函数 返回 
true ， 就 意味 着 可 以 把 表单 数据 提交 给 服务 器 。 而 如 果 
validateForm 函数 返回 false ， 提 交 操 作 就 会 被 取消 。 


把 上 面 几 个 表单 验证 函数 都 保存 到 glLobal.js 中 。 


在 浏览 器 中 刷新 contact .htm1L 。 试 一 试 ， 在 留 空 表 单 或 保持 字 
段 中 默认 值 的 情况 下 提交 表单 。 你 应 该 会 看 到 一 个 有 礼貌 的 私 告 

框 弹出 来 ， 告 诉 你 必须 解决 哪些 问题 才能 提交 表单 ， 如 图 12-21 所 
RR? 


arf rhe hand 


Contact the band 


Mersc 


图 12-21 
04. 提交 表单 


针对 联系 表单 的 最 后 一 项 改进 ， 束 是 给 页 面 添 加 一 点 Ajax。 还 记 
得 前 面 创 建 的 Submit .html 页 面 吗 ? 如 采 你 正确 地 捉 区 了 表单 ， 
表单 就 会 打开 submit ,htm]l 显示 感谢 信息 。 如 果 表 单 能 够 发 送 一 
个 Ajax 请 求 ， 而 感谢 信息 能 以 藤 入 方式 添加 到 表单 所 在 的 页 面 ， 
那 种 体验 想必 会 更 好 。 说 日 了 ， 束 旦 表单 握 交 成 功 之 后 ， 不 打开 
新 页 面 了 ， 而 是 拦截 提交 请 求 ， 上 自己 显示 结果 。 (关于 拦截 的 介 


绍 请 参考 第 7 章 。) 


先 在 global .js 文件 中 添加 第 7 章 的 getHTTPObject 函数 : 


function getHTTPObject() { 
if (typeof XMLHttpRequest == "undefined") 
XMLHttpRequest = function () { 

try { return new ActiveXobject("Msxml2.XMLHTTP.6.0"); } 
catch (e) {} 

try { return new ActiveXobject("Msxml2.XMLHTTP.3.0"); } 
catch (e) {} 

try { return new ActiveXObject("Msxml2.XMLHTTP"); } 
catch (e) {} 

return false,; 


} 
return new XMLHttpRequest(); 


然后 ， 创 建 一 个 加 载 图像 ， 在 Ajax 请 求 刚 启动 时 把 它 添加 到 文档 
中 。 如 果 你 手 上 没有 动画 加 载 GIF， 可 以 到 http://ajaxload.info 去 创 
建 一 个 。 把 这 个 加 载 图 像 命名 为 loading .gif ， 并 将 它 放 在 
images 文件 夹 中 。 

把 下 面 的 displayAjaxLoading 函数 添加 到 glLobal .js 文件 
中 。 这 个 函数 接受 一 个 DOM 元 素 作为 参数 ， 然 后 把 它 的 所 有 子 元 
。 删除 之 后 ， 再 把 1oading ,gif 图 像 添加 到 该 元 素 


function displayAjaxLoading(element) { 


while (element ,hasChildNodes()) { 
element.removeChild(element.1lastChild); 


var content = document.createElement("img"); 
content.setAttribute("src","images/loading.gif"); 
content.setAttribute("alt","Loading..."); 

element .appendCchild(content ) ; 


好 玩 的 地 方 到 了 。 接 下 来 该 编写 SubmitFormwithAjax 函数 
了 。 这 个 函数 的 第 一 个 参数 是 一 个 form 对 象 ， 第 二 个 参数 是 一 个 


目标 对 象 ， 并 执行 如 下 操作 。 


(CD 调用 displayAjaxLoading 画 数 ， 删 除 目标 元 素 的 子 元 素 ， 
并 添加 loading.gif 图 像 。 


0 把 表单 的 值 组 织 成 URL 编 码 的 子 符 串 ， 以 便 通过 Ajax 请 求 发 


(3) 创建 方法 为 POST 的 Ajax 请 求 ， 把 表单 的 值 发 送 给 
submit.html] °。 


(4) 如 采 请 求 成 功 ， 解 析 啊 应 并 在 目标 元 聚 中 显示 结果 。 
(5) 如 来 请 求 失 败 ， 显 示 销 误 消 已 。 


submitFormwithAjax 函数 在 修改 DOM 和 显示 加 载 图 像 之 前 ， 
首先 要 检查 是 否 存 在 有 效 的 XMLHttpRequest 对 象 。 


function SubmitFormwithAjax( whichform, thetarget ) { 
var request = getHTTPObject(); 


if (!request) { return false; } 
displayAjaxLoading(thetarget); 


然后 ， 创 建 一 个 URL 编 码 的 表单 数据 字符 串 ， 以 便 通 过 POST 请 求 
发 送 到 服务 器 。 这 个 URL 字 人 符 串 的 格式 与 URL 参 数 相 同 : 


name=value&name2=value2&name3=value3 


| | 


表单 中 每 个 字段 的 值 都 会 被 编码 为 这 种 数据 字符 串 。 比 如 说 ， 如 
果 表 单 中 包含 消息 “Why does 2+2=4?”， 字 符 串 就 类 似 如 下 所 示 : 


message=Why does 2+2=4?&name=me&email=me@example.com 


但 是 ， 这 里 面 的 加 号 (+) 、 等 于 号 (=) 和 问号 (?) 都 会 带 来 问 
题 。! 
。 人 是 不 是 说 表单 里 有 一 个 字段 名 叫 2， 而 它 的 值 是 
4 呢 ? 
。 加 号 是 一 个 编码 后 的 空格 ， 还 是 一 个 普通 的 加 号 ? 


。 问号 玫 示 它 后 面 是 乡 数列 雪 加 2 


为 了 避免 这 些 卜 义 ， 可 以 使 用 JavaScript 的 
encodeURIComponent 函数 把 这 些 值 编码 成 URL 安 全 的 字符 
串 。 这 个 函数 会 把 有 屠 义 的 字符 转换 成 对 应 的 ASCII 编 码 ; 


message=Why%20does%202%2B2%3D4%3F%26&name=Me&email=me%40Qexampl 


e.com 


接 下 来 ， 束 像 前 面 难 证 表单 一 样 ， 循 环 遇 历 表单 的 每 个 字段 ， 但 
这 次 不 是 验证 ， 而 是 收集 它们 的 名 字 和 编码 后 的 值 ， 把 结果 保存 


var datapParts = []; 

Var element,; 

for (var i=0; i<whichform.elements.Jlength; i++) { 
element = whichform.elements[i]; 


dataParts[i] = element.name + '=" + 
encodeURIComponent (element .value); 


收集 到 所 有 数据 后 ， 把 数组 中 的 项 用 和 号 (&) 联结 起 来 : 


var data = datapParts.join('&'); 


然后 ， 回 原始 表单 的 action 属性 指定 的 处 理 函 数 发 送 POST 请 
求 : 


request.open('POST', whichform.getAttribute("action"), true); 


并 在 请 求 中 添加 application/x-www-form-urlencoded 湾 


部 : 


request.setRequestHeader("Content-type", "application/x-www- 


form-urlencoded"); 


这 个 头 部 信息 对 于 POST 请 求 是 必需 的 ， 它 表示 请 求 中 包含 URL 编 
码 的 表单 。 


现在 ， 请 求 已 经 准备 好 了 。 在 发 送 请 求 之 前 ， 还 需要 创建 处 理 响 
应 的 onreadystatechange 事件 处 理 程序 。 


服务 器 返回 的 响应 就 是 submit .html 页面。 这 个 页 面 与 站 点 中 其 
他 页 面 一 样 ， 也 包含 头 部 区 域 、 导 航 和 内 容 。 因 为 我 们 是 想 把 结 
果 加 载 到 已 有 的 页 面 中 ， 所 以 就 不 需要 头 部 区 域 和 导航 了 。 只 

从 页 面 中 取得 <article> 元 素 束 足够 了 。 而 完整 的 页 面 放 在 那 
里 ， 束 古 预 备 厦 在 Ajax 无 效 的 情况 下 ， 束 直接 返回 submit .html 
页 面 。 


如 有 条 你 在 使 用 目 己 划 用 的 服务 如 端 脚本 语言 编写 啊 应 ， 那 么 可 以 
只 为 Ajax 请 来 输出 必要 的 标记 。 但 目前 来 讲 ， 只 能 假设 没有 服务 
器 端 脚本 ， 因 此 只 能 使 用 Ajax 来 增加 一 点 用 户 体验 。 

为 了 从 响应 中 提取 出 <article> 元 素 ， 你 得 考虑 使 用 一 种 叫做 正 


则 表达 式 的 技术 。 人 简单 地 说 ， 正 则 表达 式 整 是 一 种 模式 ， 用 来 匹 
配 字 符 串 中 的 不 同 部 分 。 


下 面 就 是 将 会 用 于 提取 <article> 中 内 容 的 正则 表达 式 : 


/<article>([\s\S]+)<\/article>/ 


在 JavaScript 中 ， 正 则 表达 式 的 每 个 模式 都 以 一 个 斜 杜 (VY) 开头 和 
结尾 。 如果 模式 本 里 包含 和 斜 村 ， 必 须 使 用 反 余 杠 对 其 转 义 ， 就 像 
上 面 模式 中 对 结束 的 </article> 标签 中 的 斜 杠 转 义 那样 。 


要 查找 与 正则 表达 式 模 式 匹配 的 字符 ， 只 要 输入 想 查 找 的 字符 即 
可 。 因 为 要 提取 的 内 容 以 <article> 开始 以 </article> 结 
尾 ， 因 此 就 直接 写 出 来 就 好 。 


注意 ”正则 表达 式 语法 中 会 用 到 一 些 特殊 字符 ， 例 如 方 括 号 
和 坚 线 。 如 果 想 直接 匹配 这 些 字 符 ， 同 样 需 要 对 它们 进行 转 
义 ， 就 像 对 斜 杠 转 义 一 样 。 比 如 说 ， 如 果 想 在 模式 中 匹配 星 
号 (* ) ， 就 需要 写成 \* ， 因 为 * 在 正则 表达 式 中 用 于 表示 
重复 。 要 了 解 其 他 特殊 字符 ， 请 参考 


http://en.wikipedia.org/wiki/Regular_expression 。 


在 <article> 和 </article> 之 间 ， 是 一 个 捕获 组 ， 用 于 捕获 

位 于 开始 和 结束 标签 之 间 的 文本 。 捕 获 组 中 的 方 插 号 包含 了 要 匹 

| 。 而 圆 括号 定义 的 捕获 组 是 为 了 便于 后 面 提取 其 中 匹配 
、 谷 O 


如 于 你 想 猜 出 两 个 标签 之 间 可 能 包含 的 所 有 字符 ， 即 使 你 的 模式 
写 得 再 长 ， 最 终 可 能 还 是 无 济 于 事 。 为 此 ， 我 们 就 在 方 括 号 中 使 
用 了 特殊 字符 来 表示 要 查找 的 内 容 。 在 这 个 正则 表达 式 中 ，\s 匹 配 
任意 空白 字符 ， 而 \S 匹 配 任意 非 空 白字 符 ， 包 括 回 车 符 和 换行 符 。 
当然 ， 除 此 之 外 ， 正 则 表达 式 中 还 有 很 多 其 他 字符 类 ， 用 于 匹配 
数值 、 单 词 、 非 单词 之 类 的 情况 。 


最 后 ， 在 方 括号 后 面 ， 使 用 一 个 加 号 (+) 表示 前 面 的 模式 重复 一 
次 或 多 次 。 星 号 〈* ) 表示 前 面 的 模式 重复 零 或 多 次 。 


简单 地 说 ， 正 则 表达 式 模式 /<article>([\s\S]+) 
<\/article>/ 可 以 理解 为 如 下 : 


。 查找 一 个 子 从 串 ， 这 个 字符 串 以 <article> 开头 ， 后 跟 一 或 
多 个 空格 或 非 空 格 字 符 ， 最 后 还 有 一 个 </article>; 

。 把 这 个 字符 串 中 的 空格 及 非 空 格子 符 包含 在 一 个 捕获 组 中 ， 
以 便 后 面 提 取 。 


有 了 正则 表达 式 之 后 ， 束 可 以 编写 onreadystatechange 函数 
oj 


request.onreadystatechange = function () { 
if (request.readyState == 4) { 
if (request.status == 200 || request.status == 0) { 
var matches = request.responseText.match(/<article> 
([\s\S]+)<\/article>/); 
If (matches.length > 0) { 
thetarget.innerHTML = matches[1]; 
} else { 
thetarget.innerHTML = '<p>0o0ps, there was an error. 
Sorry.</p>'，; 


} else { 


thetarget.innerHTML = '<p>' + request,.statusText + 
'</p>'; 


}; 


与 第 7 章 中 的 Ajax 示例 类 似 ， 这 个 函数 一 开始 也 是 检测 值 为 4 的 
readyState 属性 ， 然 后 再 验证 状态 值 是 不 是 200。 


在 得 到 成 功 的 响应 后 ， 束 可 以 通过 JavaScript 的 match 方法 对 
responseText 应 用 正则 表达 式 了 。match 方法 以 正则 表达 式 为 
参数 ， 返 回 包含 各 种 匹配 结果 的 数组 。 


数组 matches 的 第 一 个 元 素 (索引 为 0) 是 responseText 中 与 
整个 模式 匹配 的 部 分 ， 即 包括 <article> 和 </article> 在 内 
的 部 分 。 因 为 模式 中 包含 了 一 个 捕获 组 〈 一 对 圆 括 号 ) ， 因 此 
matches 的 第 二 个 元 素 (索引 为 1) 是 responseText 中 与 捕获 组 中 的 
模式 匹配 的 部 分 。 在 这 个 例子 中 ， 只 有 一 个 捕获 组 ， 因 此 
matches 中 也 只 包含 两 个 元 素 。 


在 取得 了 捕获 的 内 容 之 后 ， 函 数 把 matches[1] 中 保存 的 内 容 赋 
值 给 了 目标 元 素 的 innerHTML 属性 ， 响 应 处 理 到 此 结束 。 


这 样 ，submitFormwithAjax 函数 中 剩 下 的 代码 就 是 发 送 请 
求 ， 并 返回 true ， 表 示 画 数 已 经 成 功 发 送 请 求 。 


request.send(data); 
return true; 


}; 


完成 后 的 SubmitFormwithAjax 函数 如 下 所 示 : 


function SubmitFormwithAjax( whichform, thetarget ) { 
var request = getHTTPObject( ) ， 
if (!reduest) { return false; } 
displayAjaxLoading(thetarget); 
var dataParts = []; 
Var element; 
for (var i=0; i<whichform.elements.length; i++) { 
element = whichform.elements[i]; 
dataParts[i] = element.name + '=" + 
encodeURIComponent (element .Value ) ; 


var data = dataParts, join('&'); 
request.open('POST', whichform.getAttribute("action"), 
true); 
request.setRequestHeader ("Content-type", "application/x-www- 
form-urlencoded"); 
request.onreadystatechange = function () { 
if (request.readyState == 4) { 
If (request.status == 200 || request.status == 0) { 
var matches = request.responseText.match(/<article> 
([\s\S]+)<\/article>/); 
If (matches.length > 0) { 
thetarget.innerHTML = matches[1]; 
} else { 
thetarget.innerHTML = '<p>00ps, there was an 
error. Sorry.</p>'; 


} else { 
thetarget.innerHTML = '<p>' + request.statusText + 
'</p>'; 


} 
} 


; 
request. send(data); 
return true; 


了 


现在 ， 可 以 利用 SubmitFormwithAjax 函数 来 执行 拦截 表单 提 
交 的 任务 了 。 为 此 ， 需 要 修改 prepareForms 函数 ， 调 用 
submitFormwithAjax ， 并 给 它 传递 当前 的 fo rm 对 象 和 页 面 中 
的 article 元 素 作为 参数 。 修 改 后 的 函数 应 该 完成 如 下 操作 。 


。 如果 表单 没有 通过 验证 ， 返 回 false ; 因为 验证 失败 ， 所 以 
不 能 提交 表单 。 

。 如 果 submitFormwithAjax 函数 成 功 发 送 了 Ajax 请 求 并 返 
回 true ， 则 让 submit 事件 处 理 函 数 返 回 false ， 以 便 阻止 
浏览 器 重复 提交 表单 。 

。 否则 ， 说 明 SsubmitFormwithAjax 没有 成 功 发 送 Ajax 请 
求 ， 因 而 让 submit 事件 处 理 函 数 返回 true ， 让 表单 像 什么 
都 没有 发 生 一 样 继续 通过 页 面 提交 。 


以 下 束 是 完成 上 述 三 项 操作 的 prepareForms 函数 ; 


function prepareForms() { 
for (var i=0; i<document.forms.length; I++) { 
var thisform = document.forms[i]; 
resetFields(thisform); 
thisform.onsubmit = function() { 
if (!validateForm(this)) return false; 
var article = document.getElementsByTagName('article') 


[0]; 


If (submitFormwithAjax(this, article)) return false; 
return true; 


好 了 ， 现 在 提交 一 下 表单 试 试 ， 你 应 该 看 到 感谢 信息 出 现在 了 同 
一 个 页 面 上 上， 页 面 没有 刷新 。 不 信 ， 就 看 一 看 浏览 器 的 地 址 栏 。 
在 提交 了 表单 之 后 ， 你 看 到 的 还 是 contact .htm1 ， 而 不 是 
submit.html 。 


联系 页 面 制作 完毕 ， 当 然 整 个 网 站 也 随 之 大 功 告 成 了 。 
12.5.7 ”压缩 代码 


虽说 你 的 网 站 已 经 可 以 上 线 了 ， 但 别 忘 了 还 有 一 件 重 要 的 事情 要 做 : 
改进 性 能 ! 此 时 此 刻 ，global., js 文件 的 大 小 是 13 KB， 不 算 大 ， 
通过 压缩 ， 它 还 能 再 “瘦身 ”。 我 们 在 第 5 章 曾 经 讨论 过 ， 用 来 压缩 
JavaScript 代 码 的 工具 不 少 。 在 此 ， 我 们 要 使 用 的 是 谷歌 的 Closure 
Compiler。 通 过 它 的 在 线 表单 ， 只 要 粘贴 JavaScript 进 去 ， 束 可 以 得 到 
压缩 后 的 结 


在 浏览 右 中 打开 http:/closure-compilerappspot.com/home ， 把 


global,js 中 的 代码 复制 精 贴 到 左 侧 文本 区 // ADD YOUR CODE 
HERE 的 下 面 ， 如 图 12-22 所 示 。 


AO, 


closure Compiler Service | i EE 
€ 他 a 得 © dosure-compiler.appspot.com /home 安 有 A 
"3 Closure Compiler REST AP!I | Help | 

| Add a URL: v Add i | 

gi ] 

| Fp hap /www oxample corybgfae 5 汪 Compiled Size: 

| Optimization: © Whitespace only @ Simple QO Advanced 

| Which ootimization is right for my code? 

| Formatting: OD Pretty print DO Print input delimiter 

Compille | Reset Compiled Code Wamings 
| Emors POST data 


// ==ClosureCompi ler 

1/ i tion_lev' el rd pe 
// Sout re ee fault.js 

// 一 /ClosureCompiler 


// ADD YOUR CODE HERE 


fun cl ve ee nc) 
oldon] onloa 
1 py rid i noon ontoad l= i crion’) { 
window.onload = func 
} else 
window.onload = function(O) { 
oldonloadO); 
funcO; 


} 
} 


function ee Ar r(newElement, targetElement) { py 
tElenent .parentNode; 

if (parei .Tastohtld targetElement) { Y 

RE 


图 12-22 


单 击 Compile 按 钮 ， 然 后 就 可 以 得 到 编译 后 的 代码 ， 还 有 相关 的 统计 信 
息 。 以 我 编写 的 global .js 文件 为 例 ， 得 到 的 结果 如 下 : 


原始 大 小 12.43 KB (gzip 压 缩 后 3.12 KB) 
编译 后 大 小 8.62 KB (gzip 压 缩 后 2.36 KB) 
比 原始 大 小 减少 了 30.64% 〈gzip 压 缩 版 减少 了 24.229%6) 


注意 ， 根 据 所 添加 的 注释 及 其 他 代码 的 多 少 ， 结 果 会 有 所 差异 。 


在 scripts 文件 夹 中 新 建 一 个 global.min.js 文件 ， 把 压缩 之 后 的 
代码 复制 粘贴 到 该 文件 中 。 然 后 ， 把 所 有 页 面 的 <script> 标签 中 引 
用 的 脚本 改 为 这 个 压缩 版 。 


12.6 小结 


好 了 ，Jay Skrip and the Domsters 乐 队 的 网 站 终于 可 以 上 线 了 。 不 客气 
地 说 ， 你 为 他 们 设计 的 这 个 站 点 在 网 络 上 绝对 可 以 风靡 一 时 。 更 重要 
的 是 ， 你 把 内 容 都 放 到 了 有 效 的 、 语 义 化 的 HTML5 标 签 里 面 ， 并 用 外 
部 样式 表 实 现 了 整个 外 观 设计 。 最 后 ， 又 利用 JavaScript 和 DOM 为 它 添 
加 了 诸多 交互 功能 及 可 用 性 方面 的 增强 。 


而 且 ， 即 便 你 把 这 些 增强 的 功能 去 掉 一 部 分 ， 甚 至 全 都 合 走 ， 整 个 站 
点 照样 可 以 完美 地 运行 。DOM 脚 本 在 这 里 并 不 是 必需 的 ， 但 有 了 它 ， 
光临 站 点 的 访客 们 会 有 更 好 的 体验 。 想 想 看 ， 这 个 乐队 居然 古 虚 构 
的 ， 融 连 我 都 有 点 为 你 丑 丑 不 平 啊 ! 


那 接 下 来 还 要 学 习 什 么 ? 从 某 种 意义 上 说， 你 的 学 习 可 以 告 一 段落 
了 。 通 过 本 书 ， 你 不 仅 掌 握 了 DOM 背 后 的 理论 知识 ， 还 把 它 实际 运用 
到 了 构建 完整 的 站 点 上 面 。 利 用 从 本 书 中 学 到 的 各 种 方法 和 属性 ， 你 
还 能 创造 出 更 具 实 用 性 也 更 加 强大 的 功能 。 


但 从 另外 一 个 角度 说 ， 你 的 前 端 开 发 之 路 才刚 刚 开 始 。 本 书 只 同 你 展 
示 了 通过 少数 DOM 方 法 所 能 实现 的 少数 功能 。 不 仅 这 些 方法 还 有 更 加 
广泛 的 用 才 ， 而 且 从 未 提 及 的 很 多 其 他 方法 都 有 待 你 去 探索 呢 。 


基于 DOM 的 脚本 编程 是 一 项 值得 深入 掌握 的 技术 。 和 希望 本 书 能 让 你 对 
JavaScript 和 和 DOM 产生 初恋 一 般 的 美好 感觉 。 更 希望 你 能 肩负 起 一 位 技 
术 人 应 有 的 贡 任 ， 坚 守 DOM 可 用 性 的 阵地 ， 并 且 能 够 乐 在 其 中 。 在 光 
怪 陆 离 的 现实 世界 中 ， 你 稍 不 留神 就 会 误 入 层 途 ， 掉 进 一 味 标新立异 
的 泥潭 里 。 有 时候， 只 要 静 下 心 来 ,回头 看 一 看 ， 把 视角 放 得 更 开阔 


一 些 ， 问 题 束 会 变 得 很 清楚 。 从 Tim Berners Lee 发 明 万 维 网 (World 
Wide Web) 至 今 ， 它 的 宏伟 愿景 就 没有 改变 过 : 


Web 的 无 所 不 在 是 它 的 魅力 。 保 证 任何 人 都 能 无 障碍 地 使 用 它 ， 是 
一 个 最 基本 的 原则 。 


Web 中 无 处 不 在 的 超 文 本 文档 具有 天 然 的 可 访问 性 。 之 所 以 变 得 让 人 处 
处 受 限 ， 仅 仅 是 由 于 我 们 没有 作出 正确 的 选择 。 通 过 绿 合 Web 标 准 和 最 
佳 实践 ， 让 我 们 一 起 来 保障 Web 的 开放 、 无 障碍 。 


。 使 用 有 意义 的 标记 来 构建 页 面 的 结构 ; 
。 把 表现 性 的 信息 都 分 离 到 CSS 样 式 表 中 
。 负 贡 任 地 使 用 个 唐 突 的 JavaScript 来 应 用 行为 增强 ， 同时 确保 平稳 


退化 


现在 ， 我 们 正 处 于 Web 发 展 的 十 字 路 口 。 随 着 Ajax 技术 的 普及 和 
HTML5 的 出 现 ， 冥 面 软件 与 Web 应 用 之 间 的 界限 已 经 越 来 越 不 分 明 

了 。 在 努力 推动 Web 回 前 发 展 的 同时 ， 还 要 坚守 它 作为 一 个 无 处 不 在 的 
媒体 的 初衷 ， 势 必要 面临 诸多 挑战 ， 战 胜 各 种 困难 。 


接 下 来 的 路 在 何方 ， 这 个 问题 只 能 你 自己 来 回答 。 我 只 能 告诉 你 ， 这 
是 一 个 令 Web 设 计 师 激动 不 已 的 时 代 。 


附录 J avaScript 库 


本 书 从 头 到 尾 一 直 都 在 介绍 DOM 的 基础 知识 。 我 们 学 习 了 如 何 使 用 标 
准 的 DOM 方 法 来 完成 常见 的 操作 ， 如 何在 脚本 中 最 有 效 地 使 用 这 些 方 
法 。 也 许 你 已 经 感觉 到 了 ， 有 时 候 自己 的 代码 会 显得 十 分 见长 ， 其 中 
不 少 还 都 是 重复 的 。 如 果 只 使 用 诸如 document .getElementById 
之 类 的 DOM 方 法 ， 时 间 一 长 不 免 让 人 心 生 厌倦 。 实 际 上 ， 很 多 
JavaScript 库 提供 的 “魔术 ”函数 〈 像 $) 不 仅 可 以 当 

document .getElementById 来 用 ， 还 能 用 来 完成 这 个 方法 做 不 到 
的 更 多 事情 。 


所 谓 库 ， 束 古 可 重用 的 代码 包 ， 具 有 如 下 一 些 优点 。 


。 库 代码 经 过 了 大 量 用 户 的 测试 和 验证 。 

。 库 能 够 很 容易 地 与 已 有 的 开发 框 染 集 成 。 

。 库 为 大 多 数 日 音 琐 碎 的 DOM 编 程 工作 提供 了 方便 、 简 污 的 方案 ， 
每 个 函数 都 能 世 省 很 多 行 代 码 。 

。 库 很 好 地 解决 了 跨 浏 宽 妖 的 问题 ， 让 你 更 省 心 。 


库 可 以 把 你 从 开发 工作 中 解脱 出 来 ， 证 你 专注 于 最 重要 的 环节 ， 极 大 
地 提升 工作 效率 。 昌 然 使 用 库 的 好 处 很 多 ， 但 也 不 是 不 存在 问题 。 


。 库 是 别人 而 不 是 你 目 己 编写 的 。 你 可 能 不 了 解 它 的 内 部 工作 机 
制 ， 因 此 很 难 调试 bug 或 解决 由 它 所 导致 的 问题 。 


。 要 使 用 库 ， 就 要 把 它 集 成 到 脚本 中 。 这 样 就 会 加 重 页 面 加 载 的 负 
担 ， 挤 占用 户 有 限 的 市 宽 。 


。 混合 使 用 多 个 库 可 能 会 造成 冲突 ， 同 时 也 会 造成 功能 浪费 。 


如 膝 你 对 库 只 能 亦 步 亦 趋 而 不 能 超越 ， 那 它 也 会 成 为 你 不 思 进 取 的 慢 
性 毒药 。 在 决定 使 用 库 之 前 ， 建 议 大 家 移 化 点 时 间 真 正 掌握 本 书 介绍 
的 JavaScript 和 和 DOM 编程 技术 。 从 第 1 革 开 始 ， 我 们 就 一 直 强 调理 解 工 
作 机 制 的 重要 性 ， 而 不 要 停留 在 问题 的 表面 上 。 唾 手 可 得 的 库 比 比 它 
古 ， 稍 后 我 们 束 会 接触 一 些 ， 但 是 如 来 你 不 能 理解 它们 背后 的 工作 机 
制 ， 对 你 和 你 的 程序 都 不 能 算是 什么 好 事 。 如 采 你 对 某 个 库 理 解 不 
透 ， 而 这 个 库 又 假设 你 知道 相关 细 玉 ， 那 你 区 很 可 能 被 一 些 琐 人 条 的 问 
题 绊 住 脚 。 

在 此 声明 一 下 ， 我 本 人 与 这 些 库 没有 任何 关系 ， 因 此 不 会 厚 此 注 彼 。 
我 也 不 认为 这 些 库 在 任何 情况 下 部 是 最 佳 选择 ， 也 不 十 说 只 有 这 几 个 
库 可 供 选 择 。 下 面 所 举 的 例子 ， 痢 是 为 了 更 好 地 说 明 如 何 利用 库 来 更 
人 简单 地 完成 本 书 前 面 介绍 的 那些 任务 。 


接 下 来 我 们 会 重 温 前 面 涉及 的 如 下 主题 。 


。 语法 

。 选择 元 素 

。 操作 DOM 元 素 
。 处 理事 件 

。 动画 


Ajax 


你 会 看 到 怎么 通过 库 来 完成 这 些 任务 通常 要 用 的 代码 都 会 更 少 一 
些 ， 以 及 为 什么 说 使 用 库 能 让 你 把 精力 更 多 地 放 在 业务 逻辑 而 非 编写 
重复 性 的 脚本 上 面 。 


注意 ”对 任何 一 个 任务 来 说 ， 每 个 库 都 会 提供 多 种 实现 方法 。 我 
只 会 从 中 选择 一 两 种 我 认为 最 佳 或 最 有 效 的 方法 ， 不 可 能 把 每 个 
库 完 成 这 些 任 务 的 所 有 可 能 性 都 列举 出 来 因此， 请 读者 通过 阅 
读 这 些 库 的 文档 来 了 解 其 他 的 方法 。 


在 使 用 库 之 前 ， 最 重要 的 是 先 摘 请 楚 哪 个 库 适 合 上 自己 的 需要 。 下 面 我 
们 就 介绍 几 条 选择 库 时 需要 注意 的 事项 。 


A.1 选择 合适 的 库 


在 选择 库 的 时 候 ， 你 会 发 现 目 己 将 面临 上 百 种 选择 。 要 作出 正确 的 选 
择 ， 建 议 你 考虑 如 下 问题 。 


它 具 备 你 需要 的 所 有 功能 吗 ? 混合 使 用 多 个 库 有 可 能 导致 问题 。 
一 些 常 见 的 方法 ， 如 $( ) 和 get ( ) ， 里 然 表 面 上 相同 ， 但 功能 却 
完全 不 一 样 。 此 外 ， 如 果 同 时 使 用 多 个 库 ， 重 复 的 功能 和 元 余 代 
码 也 二 不 可 避免 的 。 

它 的 功能 是 否 比 你 想 要 的 还 多 ”功能 太 少 是 一 个 问题 ， 但 功能 过 
多 同样 不 好 。 如 采 库 中 包 售 很 多 你 用 不 到 或 者 不 能 完全 利用 的 功 
能 ， 最 好 还 是 选择 一 个 功能 少 一 些 的 版 本 ， 至 少 能 加 快 下 载 的 速 
度 。 开 发 移动 应 用 时 这 一 点 尤其 要 考虑 。 

它 是 模块 化 的 吗 ”在 解决 文件 大 小 问题 时 ， 功 能 丰富 的 库 通 常 使 
用 模块 化 的 方法 ， 把 不 同 功能 分 割 保存 到 不 同 的 文件 中 。 这 样 ， 
你 束 可 以 只 加 载 包含 相应 功能 的 个 别 文 件 ， 从 而 降低 下 载 量 。 多 
数 情况 下 ， 仅 怕 都 得 事先 加 载 所 有 必需 的 文件 ， 只 有 少数 库 提供 
了 动态 加 载 机 制 ， 让 你 能 够 按 需 动态 加 载 文件 。 动 态 加 载 文件 
时 ， 还 要 事先 考虑 到 请 求 的 次 数 。 经 验 表 明 ， 一 次 请 求 一 个 大 文 
件 、， 要 比 多 次 请 求 多 个 小 文件 更 好 。 

它 的 支持 情况 怎么 样 ? 如 果 库 的 背后 没有 活跃 的 开发 人 员 社 区 维 
护 ， 就 意味 着 bug 没 人 修改 ， 功 能 无 法 改进 。 从 另 一 方面 说 ， 使 用 
和 维护 的 人 多 本 映 也 说 明 它 的 问题 更 少 ， 也 更 可 靠 。 库 青 后 的 社 
区 不 仅仅 意味 着 修复 和 功能 ， 也 意味 着 在 你 需要 帮助 时 能 够 及 时 
得 到 很 多 人 的 文 持 。 


它 有 文档 吗 ? 没有 文档 ， 会 让 人 无 所 适 从 。 是 这 样 的 ， 也 许 你 会 
础 到 别人 不 知道 什么 时 候 写 的 儿 个 使 用 示例 ， 但 如 有 果 没 有 官方 的 
文档 ， 至 少 说 明 它 的 开发 人 员 不 够 投入 ， 而 库 本 喘 也 不 会 有 什么 
大 的 发 展 前 途 。 

它 的 许可 合适 吗 ? 别 以 为 可 以 在 线 查 看 源 代码 ， 目 己 就 可 以 想 怎 
么 用 就 怎么 用 了 。 在 决定 使 用 一 个 库 之 前 ， 必 须 碍 证 目 己 的 用 途 
包含 在 它 的 许可 范围 内 ， 如 有 果 有 特殊 需求 ， 束 更 要 事先 确定 了 。 


在 选 定 了 一 个 合适 的 库 并 在 此 基础 上 有 了 新 的 发 明 创 造 之 后 ， 别 起 记 
回馈 社区 ! 这 些 库 痢 十 开 发 人 员 无 私 奉献 的 结 量 ， 他 们 牺牲 目 己 有 限 
的 休 忌 时 间 ， 束 是 为 了 改进 你 每 天 在 用 的 工具 。 如 采 你 不 能 帮助 改进 
库 的 功能 或 者 修改 bug， 可 以 提供 一 些 使 用 示例 和 教程 啊 ， 束 算 帮 看 写 
人 。 总 之 ， 只 要 有 心 ， 不 管 做 什么 都 会 促进 库 的 


A.1.1 有 代表 性 的 库 
为 了 扒 写 这 个 附录 ， 我 根据 前 面 的 标准 选择 了 几 个 有 代表 性 的 库 ， 中 


间 也 掺 条 点 个 人 的 豆 好 。 直 说 吧 ， 后 面 的 大 多 数 示例 都 是 使 用 jQuery 编 
少数 使 用 的 是 具有 类 似 功 能 的 其 他 库 。 这 些 库 各 有 长 短 ， 人 简 述 
0 oO 


。 jQuery (http:Wjquery.com ) 官方 网 站 说 它 是 “一 个 快速 简洁 的 
JavaScript 库 ， 致 力 于 简化 HIML 文 档 搜 索 、 事 件 处 理 、 动 画 以 及 
Ajax 交互 ， 从 而 实现 快速 Web 开 发 。jQuery 的 设计 目的 是 为 了 改变 
你 编写 JavaScript 程 序 的 方式 。”jQuery 极 为 强大 的 选择 方法 、 连 组 
语法 以 及 简化 的 Ajax 和 事件 方法 ， 都 会 让 你 的 代码 变 得 简洁 且 容 
易 理 解 。 这 个 库 的 背后 还 有 一 个 非常 大 的 社区 ， 包 括 大 量 插件 开 
发 人 员 ， 他 们 开发 的 插件 极 大 增加 了 库 的 功能 。 
Prototype (http://prototypejs.org ) 把 自己 描绘 成 * 一 个 旨 在 简化 动 
人 态 Web 应 用 开发 的 JavaScript 框 架 。”Prototype 提 供 了 很 多 非常 棱 的 
DOM 探 作 功 能 ， 还 有 一 个 广 受 好 评 的 Ajax 对 象 。 它 是 出 名 最 早 的 
一 个 JavaScript 库 ， 也 是 通过 $( ) 实现 选择 功能 的 蜡 祖 。 
The Yahool User Interface (YUI) Library 
(http://developer.yahoo.com/yui ) 的 定位 是 “一 套用 JavaScript 编 写 
的 实用 函数 和 控件 ， 可 用 来 基于 DOM、DHTML 以 及 AJAX 构 建 高 
交互 性 的 Web 应 用 。YUI 还 包含 了 一 些 核心 的 CSS 资 源 。”YUI 的 开 
发 人 员 社 区 是 很 值得 称道 的 ， 它 的 文档 也 可 圈 可 点 。 这 个 麻 泗 盖 


的 功能 非常 广泛 ， 从 简单 的 DOM 操 作 到 高 级 的 效果 ， 以 及 全 功能 
的 应 用 程序 部 件 ， 只 要 你 能 想到 的 ， 它 都 有 。 由 于 功能 全 面 ，YUI 
被 按照 命名 空间 切割 成 很 多 独立 的 小 文件 ， 也 正 因为 如 此 ， 有 些 
使 用 者 有 时 候 会 搞 不 清 自 己 到 底 需 要 哪个 文件 ， 到 哪里 去 找到 该 
文件 。 光 API 列 表 束 长 达 20 页 ， 这 个 库 的 规模 就 不 难 想象 了 。 
Dojo Toolkit (http://www.dojotoolkit.org/ ) 说 它 能 “ 帮 你 节省 时 间 ， 
性 能 优异 ， 可 以 让 开发 过 程 收 放 目 如 。 它 是 经 验 丰 富 的 开发 人 员 
为 构建 伟大 的 Web 体 验 而 提供 给 你 的 工具 包 。”Dojo 确 实 是 一 个 功 
能 丰富 的 JavaScript 开 发 工具 包 ， 很 多 国际 知名 的 大 公司 都 在 用 。 
它 的 开发 人 员 社 区 也 很 庞大， 文档 做 得 也 非常 好 ， 市 面 上 有 不 少 
天 于 它 的 囊 。 

MooTools (http://mootools.net/ ) 说 自己 是 “一 个 小 巧 、 模 块 化 、 面 
癌 对 象 的 JavaScript 框 染 ， 适 合 中 高 级 JavaScript 开 发 人 员 。 利 用 它 
精巧 、 文 档 完 备 且 前 后 一 致 的 API， 可 以 编写 出 强大 、 灵 活 而 又 能 
够 跨 浏 贤 器 的 代码 。”MooTools 的 文档 写 得 非常 好 ， 用 户 社 区 也 有 
相当 规模 。 这 个 库 不 仪 包含 一 些 非常 好 用 的 DOM 增 强 API， 它 的 
Moo.fx 效 采 库 更 是 令 人 叫绝 ， 能 够 实现 各 式 各 样 的 或 简单 或 复杂 
的 网 页 动画 。 


注意 ”Prototype 和 jQuery 还 有 其 他 库 ， 都 使 用 $( ) 作为 函数 语 
法 。 如 果 你 打算 在 目 己 的 开发 环境 中 使 用 其 中 一 个 库 ， 请 务必 移 
阅读 相应 库 的 文档 ， 看 看 文档 描述 与 本 书 介 绍 有 哪些 出 入 ， 或 者 
说 该 库 在 什么 情况 下 会 与 其 他 库 发 生 冲 突 。 


A.1.2 内容 分 发 网 络 


一 定 要 尽 可 能 想 办 法 减少 网 页 文档 的 大 小 ， 并 让 济 史 器 缓存 文件 。 除 
此 之 外 ， 当 然 还 要 让 用 户 尽 可 能 快 地 加 载 到 页 面 。 对 于 库 来 说 ， 如 果 
有 很 多 站 点 要 使 用 同一 个 库 ， 那 么 最 好 是 把 这 个 库 托 管 到 一 个 公共 服 
务 器 上 ， 以 便 所 有 站 点 共享 和 访问 。 这 样 ， 当 用 户 从 一 个 站 点 跳 到 男 
一 个 站 点 时 ， 他 们 束 不 用 再 重复 下 载 相同 的 文件 了 。 


内 容 分 发 网 络 (CDN，Content Delivery Network) 可 以 解决 分 布 共 享 库 
的 问题 。CDN 束 是 一 个 由 服务 器 构成 的 网 络 ， 这 个 网 络 的 用 途 就 是 分 
散 存 储 一 些 公 共 的 内 容 。CDN 中 的 每 台 服 务 器 都 包含 库 的 一 份 复 本 ， 
这 些 服务 右 分 布 在 世界 上 不 同 的 国家 和 地 区 ， 以 便 达 到 利用 珊 辆 和 加 
快 下 载 的 目的 。 浏 览 絮 访问 库 的 时 候 使 用 一 个 公共 的 URL， 而 CDN 的 


底层 则 通过 地 理 位 置 最 近 、 速 度 最 快 的 服务 器 提供 相应 的 文件 ， 从 而 
解决 了 整个 系统 中 的 瓶颈 问题 。 


Google 为 以 下 这 些 库 提供 了 免费 的 CDN 服 务 : 


。 Dojo 
。 jQuery 

。 MooTools 
。 Prototype 

。 Yahoo! User Interface Library (YUD) 


要 了 解 Google CDN 托 管 的 这 些 库 的 最 新 版 以 及 其 他 特殊 信息 ， 请 访问 
http://code.google.com/apis/libraries/devguide.html 。 


使 用 CDN 中 托管 的 库 与 使 用 其 他 JavaScript 文 件 一 样 。 例 如 ， 以 编写 本 
书 时 的 URL 为 例 ，Google CDN 中 jQuery 库 的 URL 是 
https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js ， 因 而 在 文 
档 中 就 可 以 添加 如 下 <script> 标签 : 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/ 


=- 1.4.3/jquery.min.js"></script> 


如 果 你 觉得 仅仅 依赖 Google 或 其 他 CDN 不 保险 ， 可 以 再 提供 一 个 后 备 
<script> 标签 ， 以 便 在 CDN 不 可 用 时 从 本 地 服务 器 下 载 相应 文件 。 
方法 很 简单 ， 无 非 就 是 先 检 测 一 下 相应 对 和 象 是 否 存 在 ， 如 果 不 存 在 就 
添加 加 载 本 地 文件 的 <script> 标签 : 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/ 
=» 1.4.3/jquery.min.]js"></script> 
<script>!window.jQuery && document ,write(unescape( '%3C 


=- Script src="scripts/jquery-1.4.3.min.]js"%3E%3C/script%3E' ) ) 
</script> 


注意 ”这 个 方法 使 用 document .write 在 jQuery 库 没 有 创建 全 局 
window, jQuery 对 象 的 情况 下 添加 一 个 <script> 标签 。 本 附 
录 中 使 用 的 $ 函数 ， 其 实 就 是 对 专 有 的 jQuery 对 象 的 简写 别名 。 


. 了 后 备 代码 后 ， 即 便 CDN 的 服务 大 出 了 问题 ， 也 不 会 连 素 你 的 网 站 


A.2 语法 
在 展示 具体 的 示例 之 前 ， 应 该 先 介绍 一 些 很 多 库 都 采用 的 语法 。 


注意 jQuery、Prototype、MooTools 及 其 他 很 多 库 ， 都 把 $() 函 
数 作 为 其 选择 需 方 法 的 简写 。 因 此 ， 在 本 附 孙 中 使 用 $( ) 会 让 示 
例 代 码 更 通用 一 些 。 不 过 ， 也 要 注意 ， 虽 然 调用 这 个 函数 的 语法 
形式 相似 ， 但 不 同 的 库 在 底层 创建 的 对 象 则 过 然 不 同 。 要 了 解 具 
体 的 $ 函数 的 工作 原理 ， 请 查看 相应 库 的 文档 。 


多 数 库 都 文 持 以 点 将 方法 连 绥 起 来 的 语法 ， 也 吏 是 通过 点 操作 符 把 多 
个 方法 调用 连接 成 一 行 代码 ， 束 像 我 们 前 面 针 对 getElementById 用 


document .getElementById('example').nodeName; 


在 jQuery 之 类 的 库 中 ， 方 法 连 弘 是 一 种 特色 ， 这 些 库 特意 设计 了 相应 的 
方法 ， 以 便 通 过 连 缀 的 形式 将 复杂 的 脚本 连 绥 成 简短 的 代码 。 使 用 这 
些 库 时 ， 一 行 脚本 完成 多 项 操作 是 司空 见 惯 的 。 举 个 例子 ， 使 用 jQuery 
先 删 除 文 档 中 所 有 上 段落 的 一 个 类 名 ， 然 后 表 为 它们 添加 为 一 个 类 名 ， 

可 以 这 样 来 写 : 


$('p').removeClass('classFoo').addClass('classBar'); 


与 第 g 音 的 那个 添加 类 名 的 画 数 相 比 ， 这 行 代码 可 是 清晰 多 了 。 稍 后 我 
们 还 会 介绍 有 关 $('p' ) 选择 器 的 更 多 信息 。 


男 一 个 语法 是 迭代 。 不 少 库 痢 提供 了 方便 对 元 素 列表 进行 操作 的 循环 
结构 ， 而 连 级 语法 则 为 此 提供 了 一 种 一 目 了 然 的 方式 。 


仍 以 jQuery 为 例 ， 对 于 下 面 这 个 第 3 章 示 例 中 的 循环 : 


var items = document.getElementsByTagName("1i"); 
for (var i=0; i < Items. Jength; i++) { 


alert(typeof items[i]); 


使 用 jQuery 的 each 方法 可 以 写成 : 


$('1i').each(function(i){ 
alert( typeof this ); 


}); 


jQuery 的 each 方法 以 及 其 他 循环 方法 ， 会 基于 列表 中 的 每 个 元 素来 执 
行 一 个 回调 函数 。 这 个 回调 函数 只 接收 元 素 在 列表 中 的 索引 作为 参 

数 ， 并 在 当前 节操 的 上 下 文中 执行 ， 因 此 这 个 例子 中 的 this 引用 的 融 
是 每 个 Li 元 素 上 自身 。 


了 解 库 的 基本 语法 之 后 ， 下 面 束 来 看 一 看 选择 元 素 。 


A.3 选择 元 素 


到 目前 为 止 ， 你 已 经 知道 怎么 使 用 内 置 的 DOM 方 法 getElementById 
\` getElementsByTagName 以 及 getElementsByClassName ,来 
分 别 通过 ID、 标 答 和 类 名 来 选择 元 隶 了 。 


能 通过 ID 选 择 元 素 很 方便 ， 但 如 琳 能 使 用 各 种 CSS 选 择 句 来 选择 元 素 不 
是 更 好 吗 ? 很 多 库 都 和 jQuery 一 样 ， 提 供 了 类 似 其 $ 函数 的 高 级 选择 大 
方法 。 使 用 这 些 方法 ， 可 以 基于 以 下 要 素 进 行 选择 : 


。 带 # 的 ID， 如 $( '#elementid') 
。 带 .的 类 名 ， 如 $('.element-class') 
。 村 签名， 如 $('tag') 


当然 ， 这 些 选 择 元 素 的 途径 还 算 不 上 十 分 特别 ， 但 天 键 是 还 可 以 使 用 
各 种 CSS 选 择 器 (http://www.w3.org/TR/css3-selectors/#selectors ) 来 选 
择 特 定 的 元 素 。 


注意 在 $ 函 数 中 通过 ID 选择 器 #elLementid 选择 元 素 时 ， 该 函 

数 仍然 返回 对 象 列 表 ， 只 不 过 返回 的 列表 中 只 包含 一 个 元 素 。 这 

样 ， 你 可 以 使 用 连 绥 语法 继续 调用 each 及 其 他 jQuery 方法 。 
A.3.1 CSS 选择 器 


` 类 名 和 标签 以 外 ， 在 多 数 库 中 都 可 以 使 用 下 列 高 级 的 选 
对 硬 : 


$$('*' ) 选择 所 有 元 素 ; 

$('tag' ) 选择 所 有 HTML 标 签 中 的 tag 元 素 ; 

$('tagA tagB' ) 选择 作为 tagA 后 代 的 所 有 tagB 元 素 ; 
$('tagA,tagB,tagC' ) 选择 所 有 tagA 元 素 、tagB 元 素 和 
tagC 元 素 ; 

$('#id') 和 $('tag#id' ) 选择 所 有 ID 为 id 的 元 素 或 ID 为 id 
且 标 签 为 tag 的 元 素 ; 

$('.className' ) 和 $('tag.className' ) 选择 所 有 类 名 为 
className 的 元 素 或 类 名 为 className 标签 为 tag 的 元 素 。 


也 可 以 使 用 组 合 选择 器 $( '#myList 1i') 或 $('ul 1i 
a.selectMe ' ) 以 空格 来 分 隅 选择 更 具体 的 后 代 元 系 。 


jQuery 还 支持 下 列 CSS 2.1 属 性 选择 器 : 


$('tag[attr]') 选择 所 有 融 有 attr 属性 的 tag 元 素 ; 
$('tag[attr=value]') 选择 所 有 attr 属性 值 恰 好 等 于 
value 的 tag 元 素 ; 

$('tag[attr*=value]' ) 选择 所 有 attr 属性 值 中 包含 字符 串 
value 的 tag 元 素 ; 

$('tag[attr~=value]' ) 选择 所 有 attr 属性 值 为 空格 分 隅 的 
多 个 字符 串 且 其 中 一 个 字符 串 等 于 value 的 tag 元 素 ; 
$('tag[attr^=value]' ) 选择 所 有 attr 属性 值 以 value 开头 
的 tag 元 素 ; 

$('tag[attr$=value]' ) 选择 所 有 attr 属性 值 以 value 结尾 
的 tag 元 素 ; 

$('tag[attr|=value] ') 选择 所 有 attr 属性 值 为 连 字 符 分 隅 
的 字符 串 且 该 字符 串 以 value 开头 的 tag 元 素 ; 


$('tag[attr!=value]' ) 选择 所 有 attr 属性 值 不 等 于 value 
的 tag 元 素 。 


此 外 ， 还 可 以 使 用 子 移 择 絮 或 同 硅 选择 表 : 


$('tagA > tagB' ) 选择 作为 tagA 元 素 子 元 素 的 所 有 tagB 元 


$('tagA + tagB' ) 选择 紧邻 tagA 元 素 且 位 于 其 后 的 tagB 元 


$( tagA ~ tagB' ) 选择 作为 tagA 同 蕴 元 素 且 位 于 其 后 的 所 有 
tagB 元 素 。 


还 可 以 使 用 一 些 伪 类 和 伪 元 聚 选 择 郁 : 


$('tag:root ') 选择 作为 文档 根 元 素 的 tag 元 素 ; 
$('tag:nth-child(n)') 选择 作为 其 父 元 素 正 数 第 n 个 子 元 素 


的 所 有 tag 元 素 ; 
$('tag:nth-last-child(n)') 选择 作为 其 父 元 素 倒 数 第 n 个 
子 元 素 的 所 有 tag 元 素 ; 


$('tag:nth-of-type(n)') 选择 几 个 同 磋 tag 元 素 中 的 正 数 
第 n 个 ; 

$('tag:nth-last-of-type(n)') 选择 几 个 同辈 tag 元 素 中 
的 倒数 第 n 个 ; 

$('tag:first-child' ) 选择 作为 其 父 元 素 第 一 个 子 元 素 的 


tag 元 素 ; 四 局 
$('tag:last-child') 选择 作为 其 父 元 素 最 后 一 个 子 元 素 的 
tag 元 素 ; 


$( 'tag:first-of-type' ) 选择 几 个 同辈 tag 元 素 中 的 第 一 
s( tag:last-of-type') 选择 几 个 同 碍 tag 元 素 中 的 最 后 一 

gC tag:only-child' ) 选择 作为 其 父 元 素 唯 一 子 元 素 的 tag 元 
$( tag:only-of-type' ) 选择 同 幸 元 素 中 唯一 一 个 标签 为 tag 


的 元 素 ; 
$('tag:empty') 选择 所 有 没有 子 元 素 的 tag 元 素 ; 


。$('tag:enabled' ) 选择 界面 元 素 中 所 有 已 经 局 用 的 tag 元 

素 ; 

。$('tag:disabled' ) 选择 界面 元 素 中 所 有 已 经 禁用 的 tag 元 
素 ; 

。$('tag:checked' ) 选择 界面 元 素 中 所 有 已 经 被 选中 的 tag 元 
素 (如 复 选 框 和 单 选 按钮 ); 

。$('tag:not(s)') 选择 与 选择 器 s 不 匹配 的 所 有 tag 元 素 。 


不 同 的 库 对 上 述 选 择 夯 的 文 持 情 况 各 不 相同 ， 请 查阅 相应 库 的 文档 以 
了 解 具 体 的 情况 。 


利用 这 些 选 择 胡 ， 融 可 以 基于 它们 在 文档 中 的 位 置 而 不 必 通 过 类 名 或 
ID 而 迅速 找到 任意 一 个 特定 的 元 素 。 而 且 ， 你 的 脚本 不 仅 因此 可 以 不 
再 依赖 于 特定 的 ID 或 类 名 ， 还 能 减少 选择 元 素 所 需 的 代码 。 比 如 说 ， 
要 选择 文章 中 nav 元 素 包 含 的 所 有 链接 ， 可 以 使 用 DOM 方 法 通过 下 列 
代码 实现 : 


Var links = []; 
var articles = document.getElementsByTagName("article"); 
for (var a = 0; a < articles.length; a++ ) { 
var navs = articles[al.getElementsByTagName( "nav"); 
for (var n = 0; Nn < navs.length; n++ ) 
var links = nav[n] .getElementsByTagName("a"); 


for (var 1 = 0; 1 < links.length; l++ ) { 
links[links.length] = links[1]; 


} 
} 
// 对 链接 执行 相应 操作 


但 利用 选择 右 语 法 ， 则 可 以 缩短 为 很 少 的 字符 : 


var links = $('article nav a'); 


// 对 链接 执行 相应 操作 


这 样 ， 代 码 不 仅 清晰 了 很 多 ， 而 且 也 很 容易 看 全 。 
A.3.2 ” 库 所 提供 的 专 有 选择 器 


有 些 库 还 提供 了 专 有 的 选择 器， 例如 jQuery 文 持 $('tag:even') 和 
$('tag:odd') 选择 器 ， 用 于 选择 偶数 和 奇数 元 素 。 第 12 章 有 一 个 为 
表格 行 添加 条 纹样 式 的 函数 : 


function stripeTables() { 
if (!document.getElementsByTagName) return false; 
var tables = document.getElementsByTagName("table"); 
for (var i=0; i<tables.length; i++) { 
var odd = false; 
var rows = tables[i].getElementsByTagName("tr"); 
for (var j=0; j<rows.length; j++) { 
if (odd == true) { 


addCclass(rows[j],"odd"); 
odd = false; 

} else { 
odd = true; 


而 用 一 行 jQuery 代码 ， 就 可 以 轻松 地 选择 所 有 奇数 表格 行 并 为 它们 应 用 
CSS 属 性 : 


$("tr:odd").addclass("odd"); 


后 么 样 ， 是 不 是 简单 明了 ? 
jQuery 还 文 持 其 他 专 有 选择 紫 。 


。$('tag:even' ) 选择 匹配 元 素 集中 侦 数 序号 的 元 素 一 一 特别 适 
合 突 出 显示 表格 行 ! 

。$('tag:odd' ) 选择 匹配 元 素 集 中 奇数 序号 的 元 素 ; 

。$('tag:eq(9)') 和 $('tag:nth(9) :) 选择 匹配 元 素 集中 的 

第 一 个 元 素 ， 如 页 面 中 第 一 个 段落 ; 

$('tag:gt(n)') 选择 匹配 元 素 集 中 索引 值 大 于 n 的 所 有 元 系 ; 

$('tag:1lt(n)') 选择 匹配 元 素 集 中 索引 值 小 于 n 的 所 有 元 素 ; 

$('tag:first') 等 价 于 :eq(0):; 


。$('tag:1last') 选择 匹配 元 素 集 中 的 最 后 一 个 元 素 ; 

。$('tag:parent' ) 选择 匹配 元 素 集 中 包含 子 元素 (文本 节点 也 
算 ) 的 所 有 元 素 ; 

。$('tag:contains('test')') 选择 匹配 元 素 集 中 包含 指定 文 
本 的 所 有 元 素 ; 

。$('tag:visible' ) 选择 匹配 元 素 集 中 所 有 可 见 的 元 素 (包括 
display 属性 为 block 和 inline 、visibility 属性 为 
visible 以 及 type 属性 不 是 hidden 的 表单 元 素 ) ; 

。$('tag:hidden' ) 选择 匹配 元 素 集中 所 有 隐藏 的 元 素 (包括 
display 属性 为 none 、visibility 属性 为 hidden 以 及 type 
属性 为 hidden 的 表单 元 素 ) 。 


使 用 这 些 选择 万 可 以 快速 地 修改 元 素 ， 比 如 要 修改 页 面 中 第 一 个 段落 
的 字体 粗细 : 


$("p:first").css("font-weight","bold"); 


或 者 用 一 行 代码 来 显示 所 有 隐藏 的 <div> 元 到 : 


$("div:hidden").show( ); 


甚至 就 连 要 隐 活 所 有 包含 单词 “scared” 的 diyv 元 素 都 易如反掌 : 


$("div:contains('scared')").hide(); 


0 ， 用 于 快速 访问 表 
元 系 : 


。 :input 选择 表单 中 的 所 有 元 素 (input 、select 、textarea 
~、button): 

。 :text 选择 所 有 文本 字段 \type='"text" ) ; 

。 :password 选择 所 有 密码 字段 (type="password" ) ; 

。 : radio 选择 所 有 单 选 按钮 (type="radio" ) :; 


:checkbox 选择 所 有 复 选 框 (type="checkbox") ; 
:Submit 选择 所 有 提交 按钮 (type="submit"); 
:Image 选择 所 有 表单 图 像 (type="image" ) ; 
:reset 选择 所 有 重 置 按钮 type="reset" ) ! 

: button 选择 所 有 其 他 按钮 (type="button") 。 


A.3.3 ”使 用 回调 函数 筛选 


在 高 级 表达 式 还 不 能 满足 你 的 需要 ， 或 者 某 个 库 不 文 持 某 个 表达 式 的 
情况 下 ， 还 可 以 使 用 回调 函数 来 选择 DOM 元 素 ， 也 就 古 基 于 每 个 元 素 
执行 相应 的 筛选 代码 。 在 接 下 来 的 所 有 示例 中 ， 回 调 函 数 返 回 true 则 
意味 着 相应 的 元 素 会 出 现在 结果 集中 ， 返 回 false 则 意味 着 相应 元 素 
不 会 出 现在 结 采 集中 。 


如 采 你 想 创建 一 个 反 向 选择 器 ， 那 么 使 用 回调 函数 会 非常 方便 。 所 有 
CSS 选 择 亏 选择 的 都 是 表达 陈 最 右 端 的 元 素 ， 因 此 融 没 有 办 法 通过 写 们 
选择 “只 包含 一 个 图 像 子 元 素 的 所 有 销 标 签 ”。 但 使 用 回调 函数 则 可 轻 
松 实现 这 个 选择 。 假 设 有 以 下 HTML: 


<a name="example2">No Images Here</a> 


</1i> 
<1i> 
<a name="example3"> 
Two here! 
<img src="example2.gif" alt="example"/> 
<img src="example3.gif" alt="example"/> 
</a> 


使 用 YUI 的 YAHOo .util.Dom.getElementsBy 方法 ， 基 于 本 书 前 面 
介绍 的 DOM 元 素 属 性 ， 即 可 筛选 出 想 要 的 元 素 : 


var singleImageAnchors = YAHOO.util.Dom.getElementsBy(function(e) { 
// 查找 只 包含 一 个 图 像 子 元 素 的 <a> 节点 


return (e.nodeName == A && 
e.getElementsByTagName(' img ').length == 1); 
}); 


此 时 变量 singleImageAnchors 会 包含 一 个 列表 ， 列 表 中 只 有 一 个 
元 素 ， 因 为 示例 代码 中 只 有 一 个 仅 包 含 一 个 图 像 子 元 素 的 销 ， 因 此 该 
元 素 引 用 的 就 是 <a name="example1">。 


Prototype 和 jQuery 为 此 分 另 | 提供 了 findAll 和 filter 方法 。 在 连 级 
0 使 用 这 两 个 方法 职 可 以 筛 选 出 表达 式 返回 的 元 素 


首先 来 看 一 下 Prototype 的 代码 (使 用 $$ 选择 器 ) : 


// Prototype 库 的 回调 筛选 函数 
var singleImageAnchors = $$('a').findAll(function(e) { 
return (e.descendants().findAll(function(e) { 
return (e.nodeName == 'IMG'); 
}).length == 1); 


了 


再 看 一 下 jQuery 的 代码 : 


// jQuery 库 的 回调 筛选 函数 
var singleImageAnchors = $('a').filter(function() { 


return ($('img',this).length == 1) 


了 


Protogype 和 jQuery 的 表 法 式 选 择 吕 应 该 中 以 应 付 大 多 数 的 傅 况 “万 一 你 
需要 对 元 素 进行 更 深入 的 分 析 ， 那 么 回调 画 数 还 可 更 复杂 一 些 。 


A.4 操作 DOM 元 素 


每 个 库 都 提供 了 非常 多 的 DOM 操 作 方 法 ， 毕 竟 操 作 DOM 的 能 力 可 以 体 
现 一 个 库 的 水 平 。 这 里 我 们 只 简单 列举 其 中 几 个 ， 琵 下 的 还 是 请 读者 
目 己 去 查阅 相关 库 的 文档 。 


A.4.1 生成 内 容 


用 jQuery 创建 新 的 DOM 元 素 很 简单 。 把 HTML 代 人 码 作为 $ 函数 的 参数 传 
入 ， 即 可 创建 新 的 节点 。 下 面 这 行 代码 就 可 以 给 文档 的 body 元 素 添 加 
一 个 新 的 div 元 素 。 新 的 div 元 素 会 有 一 个 值 为 example 的 jd ， 并 
且 包 含 *Hello”。 


$('<div Id="examp1le">HellLo</div>').appendTo(document .body ) ， 


或 者 ， 也 可 以 试 一 斌 jQuery 的 模板 插件 


(http://api.jquery.com/category/plugins/templates ) 。 


注意 ”可 以 使 用 Microsoft CDN 中 托管 的 这 个 模板 插件 。 在 编写 本 
书 时 的 URL 为 
http://ajax.microsoft.com/ajax/jquery.templates/betal/jquery.tmpl.min.j 
S O 〇 


使 用 jQuery 模板 插件 可 以 在 HTML 字 符 串 中 声明 一 些 特殊 的 变量 ， 如 
${term} ， 这 些 变 量 随 后 可 以 被 耕 换 成 一 组 数组 或 其 他 模板 。 


举 个 例子 ， 以 下 是 第 8 章 的 displayAbbreviations 函数 : 


function displayAbbreviations() { 
if (!document.getElementsByTagName || !document.createElement 
=|| !document.createTextNode) return false; 
var abbreviations = document.getElementsByTagName("abbr"); 
if (abbreviations.length < 1) return false; 
var defs = new Array(); 
for (var i=0; i<abbreviations.length; i++) { 
var current_abbr = abbreviations[i]; 
var definition = current_abbr.getAttribute("title"); 
var key = current_abbr.lastchild.nodeValue; 
defs[key] = definition; 


var dlist = document.createElement("d1"); 


for (key in defs) { 
var definition = defs[key]; 
var dtitle = document.createElement("dt"); 
var dtitle text = document.createTextNode(key); 
dtitle.appendchild(dtitle_ text); 
var ddesc = document.createElement("dd"); 
var ddesc_ text = document.createTextNode(definition); 
ddesc.appendCchild(ddesc_text ) ， 
dlist.appendChild(dtitle); 
dlist.appendChild(ddesc); 


var header = document.createElement("h2"); 

var header_text = document.createTextNode("Abbreviations"); 
header .appendchild(header_text ) ; 

document .body.appendCchild(header ) ; 

document .body.appendChild(dlist); 


如 果 使 用 jQuery 及 jQuery 模板 插件 ， 可 以 如 下 重 写 : 


function displayAbbreviations() { 
// 创建 缩写 词 数组 
var data = $('abbr').map(function(){ 
return { 
desc:$(this).attr('title'), 
term:$(this).text() 
}; 


}).toArray( ); 
// 添加 到 文档 并 应 用 模板 
$('<h2>Abbreviations</h2>').appendTo(document.body).after( 
$.tmpl( "<dt>${term}</dt><dd>${desc}</dd>", data ) 
.wrapAll("<d1/>") 


); 


更 进一步 ， 还 可 以 把 模板 从 函数 中 分 离 出 来 ， 根 据 每 一 页 的 具体 情况 
来 定义 缩写 词 模 板 。 模 板 插 件 的 文档 (http://api.jquery.com/tmpl ) 中 详 
细 介 绍 了 利用 <script> 元 素 的 更 高 级 模板 功能 ， 请 读者 目 行 参 考 。 


A.4.2 ”操作 内 容 


如 果 想 对 现 有 文档 执行 某 些 操作 ， 或 者 移动 某 些 元 素 的 位 置 ， 可 以 使 
用 jQuery 的 appendTo 或 jnsertAfter 等 方法 。 通 过 这 些 方法 ， 可 以 


找到 一 组 元 素 ， 并 把 它们 全 都 变 成 男 一 个 元 到 的 子 元 素 。 
例如 ， 可 以 把 一 个 列表 中 的 所 有 元 素 全 部 转移 到 另 一 个 列表 中 : 


$('Uul#1list1i 1i').appendTo("ul#1ist2"); 


之 所 以 可 以 实现 这 种 操作 ， 原 因 在 于 每 个 元 素 在 文档 中 都 只 有 一 个 引 
用 。 你 让 它 成 为 男 一 个 元 素 的 子 元 素 ， 也 就 意味 着 它 必 须 与 原来 的 父 
元 素 解除 “父子 天 系 ”。 假 如 你 想 的 是 复制 这 些 元 素 ， 那 么 可 以 使 用 
jQuery 的 clone 方 法 : 


$('Uul#1list1i 1i').clone().appendTo( "ul#1ist2"); 


DOM 操 作 在 任何 一 个 库 中 都 受到 了 极 大 的 重视 ， 它 们 分 别 都 提供 了 一 
些 用 于 删除 、 插 入 、 诡 加、 前 置 等 操作 的 快捷 方法 。 


A.5 ”处 理事 件 
综观 全 书 ， 不 难 发 现 事件 其 实 是 用 户 交 互 的 根本 所 在 。 没 有 事件 ， 也 
就 没有 办 法 与 页 面 交互 。 


通过 前 面 的 学 习 ， 相 信 你 已 经 掌握 了 一 些 基 本 的 事件 方法 。 说 到 使 用 
库 ， 当 然 很 多 也 都 内 置 了 相应 的 事件 管理 功能 。 而 且 ， 这 些 库 还 包含 
了 浏览 器 没有 原生 实现 或 者 说 W3C 事 件 模 块 中 没有 定义 的 目 定 义 事件 
的 注册 及 调用 机 制 。 


A.5.1 加 载 事件 


前 面 介 绍 过 一 个 为 页 面 加 载 事件 注 册 处 理 方 法 的 函数 ， 即 
addLoadEvent : 


function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 


window.onload = func， 
} else { 
window.onload = function() { 
oldonload( ); 
func( ) ， 


利用 这 个 函数 可 以 在 页 面 加 载 的 时 候 执 行 其 他 函数 : 


function myFucntion() 
// 在 页 面 加 载 后 执行 一 些 操 作 


} 
addLoadEvent (myFunction ); 


以 上 代码 也 可 以 写成 : 


addLoadEvent(function() { 
// 在 页 面 加 载 后 执行 一 些 操 作 


}); 


不 同 的 库 也 都 提供 了 类 似 的 方法 ， 只 不 过 在 实现 方式 上 会 有 所 不 同 。 
比如 说 ，jQuery 束 利用 连 级 语法 基于 每 种 事件 类 型 都 提供 了 相应 的 事件 
方 读 (http://api.jquery.com/category/events ) 


以 addLoadEvent 为 例 ，jQuery 的 ready 方法 以 类 似 的 方式 实现 了 相 
应 的 机 制 : 


$(document ) .ready(handler )， 


$(handler); 


第 二 个 方法 假定 document 对 象 是 ready 方法 的 目标 。 而 ready 方法 
并 将 该 函数 注册 为 处 理 文档 就 绪 事 件 的 处 理 
尖 慌 X: 


$(document).ready(function() { 


// 在 页 面 加 载 后 执行 一 些 操作 
}); 


这 样 ， 只 要 DOM 初 始 化 工作 一 完成 ， 就 会 调用 ready ， 相 应 地 就 会 立 
即 执行 传 入 的 回调 画 数 。 


如 果 想 像 使 用 addLoadEvent 函数 一 样 使 用 jQuery 的 方法 ， 只 要 把 
addLoadEvent 替换 成 $ 就 可 以 了 : 


function myFucntion() { 


// 在 页 面 加 载 后 执行 一 些 操作 


} 
$(myFunction); 


或 者 干脆 这 样 写 


$(function() { 
// 在 页 面 加 载 后 执行 一 些 操 作 
}); 


A.5.2 ”其 他 事件 


除了 加 载 事 件 ，jQuery 等 库 还 提供 很 多 特定 于 元 素 的 事件 ， 例 如 plLur 
~focus ~、click ~、dblclick 、mouseover 、mouseout 和 
submit ， 等 等 。 


使 用 这 些 事件 方法 ， 可 以 为 DOM 元 素 批 量 注册 事件 处 理 范 数 ， 比 如 为 
页 面 中 的 每 个 链接 注册 相同 的 clLick 事件 处 理 函 数 : 


$('a').click( function(event ) { 


// 在 新 窗口 中 打开 当前 href 中 的 链接 
window. open(this. getAttribute('href')); 
// 阻止 链接 的 默认 动作 


return false; 


}); 


法 还 有 男 一 种 意外 的 用 法 ， 即 在 没有 用 户 交 互 的 情况 下 ， 你 可 


以 通过 调用 相应 的 方法 来 触发 元 素 上 已 经 注册 的 事件 监听 器 。 


$('a:first').click(); 


举例 来 说 ， 下 面 是 第 12 章 的 resetFields 和 prepareForms 函数 : 


function resetFields(whichform) { 
for (var i=0; i<whichform.elements.length; i++) { 
var element = whichform.elements[i]; 
if (element.type == "submit") continue; 
var hasPlaceholder = element.placeholder || 
element.getAttribute('placeholder'); 
if (!hasPlaceholder) continue; 
element.onfocus = function() { 
var text = element.placeholder || 
element.getAttribute('placeholder'); 
if (this.value == text) { 
this.className = ''， 
this.value = ""， 


} 


element.onblur = function() { 
if (this.value == "") 
this.className = 'placeholder'; 
this.value = element.placeholder || 
element.getAttribute('placeholder' );; 
} 


element .onblur(); 
} 
} 
function prepareForms() { 
for (var i=0; i<document.forms.length; I++) { 
var thisform = document.forms[i]; 
resetFields(thisform); 
} 
} 


addLoadEvent (prepareForms) 


使 用 jQuery 选择 器 和 事件 方法 ， 以 上 准备 表 蛙 的 代码 可 以 缩短 为 : 


$(function() { 
$('form input[placeholder]').focus(function(){ 
var input = $(this); 
if (input.val() == input.attr('placeholder')) { 
input.val('').removeClass('placeholder').; 


} 
}).blur(function(){ 


var input = $(this); 
If (input.val() == '') { 
input.val(input.attr('placeholder')).addclass('placeholder'); 


} 
}).blur(); 


J 


A.6 Ajax 


Ajax 应 用 爆发 后 ，JavaScript 库 也 变 得 越 来 越 流 行 起 来 。 很 多 库 中 的 第 
et 即便 不 是 ，Ajax 对 象 也 是 这 些 库 迅 速 流行 的 一 个 


A.6.1 ” Prototype 与 Ajax 


最 早 源 于 Ruby on Rails 项 目的 Prototype 库 ， 就 是 因 Ajax 对 象 而 流行 的 。 
Prototype 提 供 了 几 种 独特 的 Ajax 方法 : 


。Ajax.Request(url，options) 执行 基本 的 
XMLHttpRequest 请 求 ; 

。Ajax.Updater(element，url，options) 包装 请 求 ， 并 且 
将 请 求 返回 的 内 容 目 动 添加 到 给 定 的 DOM 方 扩 中 ; 

。Ajax.PeriodicalUpdater(element,，,url，options) 按 
0 i 马上 有 目 动 将 请 求 返回 的 内 容 添 加 a 到 给 定 的 DOM 市 点 


以 上 每 个 方法 中 的 options 参数 都 包含 下 列 属性 。 
。contentType ， 即 请 求 的 内 容 类 型 。 默 认 值 为 


application/x-www-form-urlencoded 。 


。method ， 即 请 求 的 HTTP 方法 。Prototype 对 于 put 和 delete 等 
请 求 的 处 理 方式 ， 以 post 请 求 重 写 并 将 原始 请 求 方法 放 到 请 求 的 
_method 参数 中 。 默 认 值 为 post。 
parameters ， 即 与 请 求 一 同 发 送 的 参数 。 这 些 参数 的 格式 可 以 
是 类 似 get 请 求 中 URL 编 码 的 字符 串 ， 也 可 以 是 类 似 散 列 的 对 
象 ， 比 如 数组 或 以 属性 名 表示 参数 名 的 对 象 。 
postBody ， 默 认 值 为 nulL1 ， 即 在 post 请 求 体 中 包含 的 内 容 。 
如 果 为 空 ， 请 求 体 中 将 包含 parameters 选项 的 内 容 。 
requestHeaders ， 是 一 个 对 象 或 数组 ， 可 以 通过 它 在 请 求 中 添 
加 额外 的 头 部 信息 。 如 果 是 对 象 ， 属 性 名 和 值 分 别 表示 请 求 头 部 
的 名 和 值 ， 如 果 是 数组 ， 则 偶数 索引 项 (从 0 开始 算 ) 表示 头 部 信 
息 的 名 称 ， 奇 数 索 引 项 (从 1 开始 算 ) 表示 请 求 头 部 信息 的 值 。 默 
"0 Prototype 会 在 这 个 属性 中 包含 儿 个 头 部 信息 ( 重 写 就 
没 : 
o X-Requested-with ， 默 认 情 况 下 为 XMLHttpRequest ， 
供 服 务 器 端 识 别 Ajax 请 求 用 。 你 可 以 根据 自己 的 需要 设置 。 
o X-Prototype-Version ，Prototype 当 前 的 版 本 号 。 
o Accept ， 默 认 设置 为 text/javascript 、text/html 、 
application/xml 、text/xml 和 */* 。 
o Content -type ， 根 据 contentType 的 值 和 编码 方式 构 
建 。 


除了 这 些 属 性 外 ， 还 可 以 在 请 求 的 不 同 阶段 根据 服务 器 的 响应 调用 一 
些 回 调 方法 。 下 列 每 一 个 回调 方法 都 应 该 接收 到 两 个 参数 ， 一 个 是 
XMLHttpRequest 对 象 ， 另 一 个 在 响应 包含 X-JSON 头 部 的 情况 下 是 
响应 返回 的 JavaScript 对 象 。 如 果 没 有 X-JSON 头 部 信息 ， 则 第 二 个 参数 
为 null。 唯 一 一 个 例外 是 onException 回调 方法 ， 它 的 参数 一 个 是 
Ajax.Request 实例 ， 另 一 个 是 异常 对 象 。 下 面 以 它们 在 请 求 中 被 调 
用 的 顺序 列 出 了 这 些 回调 方法 。 


。 OnException(ajax,redquest,exception) 在 请 求 或 响应 中 
人 ， 可 能 会 在 下 面 任何 一 个 回调 方法 执行 期 间 同 
。onuUninitialized(XHRrequest, json) 在 请 求 对 象 创建 完成 
后 可 能 会 被 调用 ， 但 不 一 定 总 会 被 调用 ， 因 此 尽量 不 要 使 用 它 。 
。onLoading(XHRrequest, json) 在 对 象 创 建 完成 且 其 连接 打开 
时 可 能 会 被 调用 ， 但 同样 不 一 定 总 会 被 调用 ， 因 此 尽量 不 要 使 用 


站 


驹 O 

onLoaded(XHRredquest, json) 在 请 求 对 象 创建 完成 、 连 接 打 

开 且 准备 好 发 送 请 求 时 可 能 会 被 调用 ， 但 同样 不 一 定 总 会 被 调 

用 ， 因 此 尽量 不 要 使 用 它 。 

。 onInteractive(XHRreduest, json) 在 请 求 对 象 接收 到 部 分 
响应 但 尚未 接收 到 全 部 响应 时 可 能 会 被 调用 。 没 错 ， 它 同样 不 一 
定 总 会 被 调用 ， 因 此 尽量 不 要 使 用 它 。 

。 On### (XHRrequest,json) 在 适当 的 响应 代码 被 设置 时 会 被 
调用 。 烦 # 是 用 来 表示 响应 情况 的 HITP 状 态 代码 。 这 个 回调 方法 
会 在 响应 完成 但 尚未 调用 onComplete 之 前 被 调用 。 这 个 方法 也 
会 阻止 onSuccess 和 onFailure 回调 方法 的 执行 。 

。onFailure(XHRrequest, json) 在 请 求 完 成 且 有 状态 代码 但 其 
状态 代码 不 是 200 到 299 之 间 的 数值 时 被 调用 。 

。 onSuccess (XHRrequest, json) 在 请 求 完 成 且 状 态 代 码 没 有 定 
义 ， 或 者 状态 代码 介 于 200 到 299 之 间 时 被 调用 。 

。onComplete (XHRrequest,json) 在 请 求 过 程 的 最 后 被 调用 。 


Prototype 还 提供 了 一 个 全 局 Ajax.Responders 方法 ， 用 于 控制 和 访 
问 进 进出 出 各 种 Ajax .Request 方法 要 了 解 有 关 
Ajax.Responders 方法 的 详细 情况 ， 请 参考 Prototype 的 在 线 文档 
http://www.prototypejs. aa 9 


以 下 是 使 用 Prototype 发 送 Ajax 请 求 的 几 个 例子 。 


// Prototype Ajax.Request 

// 创建 一 个 新 的 一 次 性 请 求 并 在 成 功 时 弹出 消息 

new Ajax.Request( 
'some-server-side-script.php', 


method: 'get', 
onSuccess: function (transport) { 
var response = transport.responseText || "no response text",; 
alert('Ajax.Request was successful: ' + response); 
}, 


onFailure: function (){ 
alert('Ajax.Request failed'); 


); 


// Prototype Ajax.Updater 


// 创建 一 个 一 次 性 请 求 ， 以 _ responseText 来 填充 #ajax-updater-target 元 素 
new Ajax.Updater( 

$('ajax-updater-target ' )， 

'some-server-side-script.php', 


method: "get '， 
// 将 其 添加 到 目标 元 素 的 上 部 
insertion: Insertion.Top 


} 
) ; 


// Prototype Ajax. periodicalUpdater 
// 创建 一 个 周期 性 的 请 求 ， 每 10 秒 钟 自动 填充 一 次 # ajax-periodic-target 元 素 
new Ajax.Periodicalupdater( 

$('ajax-periodic-target'), 

'some-server-side-script.php "， 


method: 'GET', 
// 添加 到 现 有 内 容 的 上 方 
insertion: Insertion.Top, 
// 每 10 秒 钟 运行 一 次 
frequency: 10 

} 


Ajax.Updater 对 象 的 男 一 个 简单 但 却 很 给 力 的 用 法 ， 是 隔 一 段 时 间 
保存 一 次 表单 信息 。 这 特别 适合 在 博客 应 用 中 解决 用 户 临 时 保存 数据 
的 问题 。 使 用 Ajax .Updater( ) 对 象 ， 再 配合 Prototype 的 Form 
化 方法 ， 可 以 从 表单 中 取得 当前 的 信息 ， 每 隔 几 分 钟 就 保存 到 服务 
一 次 ， 从 而 保证 用 户 不 会 意外 丢失 已 经 花 时 间 填 写 的 内 容 。 


让 Prototype 实现 自动 保存 功能 
30 秒 钟 就 保存 一 次 #autosave-form 表单 中 的 信息 
然后 更 新 #autosave-status 元 素 标明 更 新 状态 
setTimeout(function() { 
new Ajax.Updater( 
$('autosave-status' )， 
' some-server-side-autosave-script.php ', 


method: 'post '， 
parameters : $('autosave-form').Sserialize(true) 


) ; 
}, 30000); 


A.6.2 jQuery 与 Ajax 


本 比较 语法 上 的 异同 ， 接 下 来 看 一 看 jQuery。jQuery 也 有 一 个 低级 的 
$.ajax 方法 ， 可 以 接受 各 种 属性 。 不 过 ， 还 是 先 来 看 看 它 的 那些 简单 
易 用 的 方法 吧 。 


。$,post(url，params，callback) 通过 POST 请 求 取得 数 
据 。 

。$.,get(url，params，callback) 通过 GET 请 求 取得 数据 。 

。$,getJSON(url，params，callback) 取得 JSON 对 象 。 

。$.getScript(ur1，callback) 取得 并 执行 JavaScript 文 件 。 


这 些 方法 实际 上 都 是 $. ajax( ) 的 包装 方法 ， 它 们 的 回调 方法 总 会 被 
作为 $ .ajax( ) 的 成 功 回调 方法 调用 。 每 个 回调 方法 都 接受 两 个 参 
数 ， 分 别 是 请 求 对 象 的 响应 文本 (responseText ) 和 状态 


(status ) : 


$.get('some-server-side-script.php', 
{ key: 'value' }, 
function(responseText, status)t{ 


// 你 的 代码 
) 


状态 是 以 下 几 个 值 之 一 : 


。 SUCCesSss 
e。 error 
。 Notmodified 


在 使 用 getJSON 和 getScript 方法 时 曙 应 会 被 求 仁 ， 因 此 getJSON 
方法 中 传 给 回调 的 参数 是 一 个 JavaScript 对 象 。 


下 面 再 给 出 几 个 使 用 上 壕 方 法 的 例子 。 


// 使 用 $.get() 实 现 快速 的 Ajax 调用 


// 创建 一 个 一 次 性 的 请 求 并 在 成 功 时 弹出 消息 


$.get('some-server-side-script.php', 
{ key: 'value' }, 
function(responseText, status){ 
alert('successful: ' + responseText); 


) ; 


// 使 用 $.getJSON() 加 载 JSON 对 象 
// 创建 一 个 一 次 性 的 请 求 加 载 JSON 文件 并 在 成 功 时 弹出 消息 
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$., get JSON( some-server-side-script.php', function(json){ 
alert('successful: ' + json.type); 


}); 


jQuery 还 提供 了 一 个 load( ) 方法 : 


。$(expression).load(url, params, callback) 把 URL 的 
结果 加 载 到 相应 的 DOM 元 素 中 。 


个 方法 会 以 返回 的 结 琳 目 动 填充 相应 的 一 个 或 多 个 元 素 : 


. ) .lo0ad() 自动 填充 元 素 
建 一 个 一 次 性 的 请 求 ， ] responseText 的 内 容 填充 #ajax-updater-target 


$("#ajax-updater-target").1load( 
'some-server-side-script.php', 
{ key: 'value' }, 
function(responseText,status) { 
alert('successful: ' + responseText); 


Prototype 的 Ajax .Updater( ) 方法 与 此 也 是 类 似 的 。 
而 且 ， 也 可 以 使 用 $( ) 方法 实现 周期 性 的 保存 功能 


// 使 用 jQuery 实现 自动 保存 功能 


// 每 30 秒 钟 保存 一 次 #autosave-form 表单 的 信息 
// 然后 更 新 #autosave-status 元 素 标明 更 新 状态 
setTimeout(function() { 
$('autosave-status' ). 10oad ( 
'some-server-side-script.php', 
$.param({ 


title:$('#autosave-form input[@name=title]').val(), 
story:$('#autosave-form textarea[@name=story]').val() 


}) 


); 
}, 30000); 


jQuery 还 有 一 些 Ajax 插 件 ， 例 如 Mike Alsup 的 Ajax Form 插 件 
(http://plugins.jquery.com/ ) 就 让 处 理 表 单 和 Ajax 事 件 变 得 很 容易 。 想 
要 像 第 12 章 那样 通过 Ajax 提交 评论 表单 吗 ? 就 这 么 简单 : 


$( '#commentForm' ) .ajaxForm(function() { 
alert("Thank you for your comment!"); 


这 个 方法 会 将 表单 的 内 容 序列 化 ， 然 后 将 结果 发 送 给 表单 的 action 属 
性 中 指定 的 脚本 。 


A.7 动画 和 效果 
到 现在 为 止 ， 我 们 已 经 知道 使 用 库 能 完成 很 多 DOM 操 作 和 脚本 任务 
了 “。 下面 我 们 来 享受 一 些 视觉 上 的 冲击 和 交互 效果 。 


有 些 库 (如 jQuery) 会 内 置 一 些 效 采 属 性 ， 而 男 一 些 库 则 会 依赖 插件 来 
提供 效果 方法 。 如 果 你 选择 的 库 没 有 效果 方法 ， 建 议 考 虑 一 下 Moo .fx 


和 Script.aculo.us ° 


。Moo.fx (http://moofx.mad4milk.net/ ) 把 自身 描述 为 “一 个 超 轻 
量 、 超 小 巧 、 超 精简 的 JavaScript 效 果 库 ， 可 以 配合 
prototype.js 或 nootools 框架 使 用 。” 总 的 来 说 ，Moo ,fx 的 
使 用 还 是 非常 方便 的 ， 它 采用 了 一 种 低 抽象 度 的 方式 ， 让 你 指出 
元 素 以 及 想 要 在 给 定 的 时 间 间 隔 内 修改 哪个 CSS 属 性 。 这 些 修改 只 
会 应 用 到 特定 的 元 素 ， 不 会 应 用 到 该 元 素 的 子 元素 (除非 子 元 素 
根据 层 琶 规则 会 继承 相应 的 CSS 属 性 ) 。 利 用 这 些 低 抽象 度 的 特 
， 不 用 编写 太 多 代码 ， 束 可 以 创造 出 几乎 任何 你 能 够 想到 的 歼 


。 Script,aculo.us (http://script.aculo.us ) 昵 ， 它 “是 一 个 好 
用 、 踪 浏 贤 絮 的 JavaScript 用 户 界 面 库 ， 能 够 让 你 的 网 站 和 和 Web 应 
用 动 起 来 。”Script ,aculo.us 采用 的 是 一 种 高 抽象 度 的 方式 ， 
提供 了 一 些 核心 效果 以 及 在 此 基础 上 的 组 合 效 果 。 在 应 用 这 些 高 
级 效果 的 情况 下 ， 指 定 元 素 的 所 有 子 元 素 可 能 也 会 受到 影响 。 例 
如 ， 在 某 个 段落 上 调用 Effect .Scale 时 ， 字 体 的 大 小 也 会 随 着 
段落 及 其 他 子 元 素 的 宽度 和 高 度 的 变化 而 同步 缩放 。 这 些 高 级 效 
果 的 组 合 让 应 用 大 型 、 复 杂 的 效果 变 得 比较 人 简单， 值得 考虑 。 


以 上 这 两 个 效果 库 都 是 构建 在 Prototype 基 础 上 的 ，Moo .fx 也 有 基于 
MooTools 库 的 版 本 (http://mootools.net/) 。 


注意 ”Moo .fx 需要 通过 $( ) 和 $$( ) 方法 取得 元 素 ， 因 此 再 重申 


一 次 ， 如 果 你 使 用 的 是 这 个 库 ， 那 么 就 要 在 混合 多 个 库 时 倍加 小 
心 。 建 议 查 看 文档 ， 采 取 最 佳 方式 避免 冲突 。 


A.7.1 基于 CSS 属 性 的 动画 


动画 的 最 基本 形式 ， 就 是 随 着 时 间 推 移 改 变 一 个 元 素 的 CSS 属 性 ， 比 如 
下 面 这 个 我 们 在 第 10 章 看 到 过 的 moveElement 函数 : 


function moveElement(elementID,final x,final y,interval) { 
if (!document.getElementById) return false; 
if (!document.getElementById(elementID)) return false; 
var elem = document.getElementById(elementID); 
if (elem.movement) 区 
clearTimeout(elem.movement ) ; 


} 
If (lelem.style.left) { 
elem.style.left = "QOpx"; 


} 
if (!elem.style.top) { 
elem.style.top = "QOpx"; 


var xpos = parseIint(elem.style.1left); 

var ypos = parseIint(elem.style.top); 

Var dist = 0; 

If (xpos == final x && ypos == final y) { 
return true; 


if (xpos < final x) { 
dist = Math.ceil((final x - xpos)/10); 


Xpos = Xpos + dist,; 

} 

if (xpos > final x) { 
dist Math.ceil((xpos - final x)/10); 
Xpos Xpos - dist,; 

} 

if (ypos < final y) { 
dist = Math.ceil((final y - ypos)/10); 
ypos = ypos + dist; 


} 

If (ypos > final y) { 
dist Math.ceil((ypos - final _y)/10); 
ypos ypos - dist; 


} 

elem.style.left = xpos + "px"; 

elem.style.top = ypos + "px"; 

var repeat = 
"moveElement('"+elementID+"',"+final x+","+final y+","+interval+")" 


了 


elem.movement = setTimeout(repeat,interval); 


使 用 计时 融和 数学 公式 的 问题 在 于 ， 代 码 会 在 不 知 不 沉 中 变 得 非常 复 
杂 见 长。 好 在 jQuery 之 类 的 库 可 以 为 我 们 提供 很 大 的 帮助 。 


上 面 这 个 moveElement 函数 是 通过 链接 的 鼠标 事件 触发 的 : 


var links = list.getElementsByTagName("a"); 

// 为 mouseover 事件 添加 动画 行为 

links[0] .onmouseover = function() { 
moveElement ("preview", -100,0,10); 


links[1].onmouseover = function() { 
moveElement ("preview", -200,0,10); 


links[2].onmouseover = function() { 


moveElement ("preview", -300,0,10); 


} 


我 们 可 以 把 moveElement 相关 的 逻辑 集中 起 来 ， 通 过 jQuery 的 
animate 方法 来 为 preview 元 素 应 用 位 置 动画 。 这 个 animate 方法 
以 CSS 属 性 及 最 终 值 的 列表 作为 参数 ， 能 够 按照 指定 的 时 间 间 隔 从 当前 
值 开始 修改 相应 的 属性 值 。 


$('a').each(function(i) { 
var preview = $('#preview' ); 
var final x = i * -100; 


$(this).mouseover(function(){ 
preview.animate({left:final x}, 10); 
}); 
}); 


这 就 比 第 10 章 的 代码 简单 多 了 。 使 用 jQuery 只 需 几 行 代 码 ， 而 且 不 必 担 
心 复 末 的 数学 计算 和 计时 絮 问 题 。 


当然 ， 还 不 止 于 此 ， 你 还 可 以 控制 动画 的 变化 过 程 。jQuery 的 


animate 方法 为 此 还 毛 受 为 一 个 参数 : 


$(expression).animate( properties, duration, easing ) 


第 三 个 参数 easing 是 一 个 函数 ， 用 于 计算 动画 在 特定 时 间 段 内 的 速 
度 。 这 些 函 数 涉 及 的 数学 计算 有 时 候 会 非常 复杂 ， 但 借助 它们 来 改变 
速度 却 能 创建 出 精彩 的 淡 入 淡出 以 及 弹跳 效果 。jQuery 库 中 默认 的 缓 动 
函数 只 有 默认 的 Swing 和 速度 恒定 的 Linear 。 


要 想得到 更 多 缓 动 范 数 ， 可 以 在 jQuery UI 套 件 (http://jqueryui.com/ ) 
或 jQuery 缓 动 插 件 (http://gsgd.co.uk/sandbox/jquery/easing ) 中 去 找 。 


A.7.2 组合 动画 


不 少 库 者 提供 了 一 些 组 合 动 男 ， 以 方便 开发 人 员 使 用 。 例 如 ， 在 不 用 
插件 的 情况 下 ，jQuery 提 供 了 下 列 方法 。 


fadeIn 和 fadeOut 。 

fadeTo 将 匹配 元 素 的 不 透明 度 调 整 到 指定 的 值 。 
slideToggle、slideDown 和 slideUp 用 “ 滑 移 动画 ”隐藏 和 显 
示 匹 配 的 元 素 。 


其 他 库 ， 比 如 Script,aculo,us ， 还 提供 了 更 多 高 级 动画 效果 ， 比 
如 下 面 这 些 。 


Effect 
Effect 
Effect 
Effect 
Effect 
Effect 
Effect 
Effect 
Effect 


Effect ， 
.Grow 
. Shrink 


Effect 
Effect 


.Appear ~ Effect.Fade 

. Puff 

.DropOut 

.Shake 

. Switchoff 
.BlindDown 和 Effect .BlindUp 
.SlideDown 和 Effect.SlideUp 
.Pulsate 

. Squish 


Fold 


A.7.3 ”注意 可 访问 性 


在 使 用 恰当 的 情况 下 ， 微 妙 的 效果 可 以 起 到 提示 变更 的 作用 。 动 画 和 
效果 也 可 以 把 人 的 注意 力 吸 引 到 界面 的 某 个 地 方 ， 从 而 引导 交互 顺利 
进行 ， 或 者 只 是 让 访客 感到 惊喜 并 给 人 留 下 难 起 的 印象 ， 为 没有 什么 
新 意 的 HTML 添 加 一 点 生命 气 奶 。 


请 注意 ， 应 用 效果 时 要 时 刻 提 醒目 己 注 意 可 访问 性 。 看 上 去 美不胜收 
的 各 种 效 末 ， 如 果 影 响 到 访客 顺利 碍 看 信息 ， 八 介 束 得 不 途 失 了 。 


A.8 人 小结 


在 本 附 孙 中 ， 我 们 探讨 了 为 什么 库 能 够 帮 我 们 简化 日 划 的 编程 工作 。 
篇 幅 所 限 ， 不 可 能 面面俱到 地 谈 到 所 有 库 或 者 库 的 所 有 功能 。 为 此 ， 
请 感 兴趣 的 读者 目 行 查阅 相关 库 的 文档 ， 从 而 全 面 了 解 库 的 特点 ， 作 
出 正确 的 选择 。 


选择 库 的 时 候 ， 一 定 要 全 面 萎 察 目 己 看 中 的 每 一 个 候选 库 。 搞 清楚 如 
何 处 理 库 之 间 的 冲突 ， 功 能 太 少 还 是 太 多 ， 有 没有 坚强 的 社区 做 后 
盾 ， 或 者 说 能 否 得 到 及 时 的 技术 文 持 。 在 选 定 了 合适 的 库 以 后 ， 还 要 
尽 可 能 发 挥 出 这 个 库 的 最 大 效用 。 与 此 同时 ， 最 好 能 够 进一步 理解 库 


看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 
编辑 或 作 译 者 协助 答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : 


ebook(Oturingbook.com ° 
在 这 里 可 以 找到 我 们 : 


。 微 博 @ 图 灵 教 育 : 好 书 、 活 动 每 日 播报 

。 微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

。 微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

。 微 信 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精彩 人 生 
。 微 信 图 灵 教 育 : turingbooks 
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